AngularJS 动态 SVG 显示

Question

我想从范围内的数据中绘制 svg。但是当它由于某种原因使其部分为空或NaN时。

另外，我在渲染后就遇到了类似这里的错误

在数据准备好之前如何防止渲染指令？或者可能是它发生这种情况的其他原因，你怎么看？

我得到了类似这样的指令视图

<svg height="500" width="500" ng-if="svgConfig.textConfig"> 
</g>
    <svg height="{{svgConfig.height}}" 
        width="{{svgConfig.width}}" 
        y="{{(svgConfig.textConfig.fontSize) + 1*svgConfig.textConfig.distance.Y}}">
        <g 
            transform="translate(0, {{svgConfig.textConfig.distance.Y}})">          
            <text font-family="{{svgConfig.textConfig.fontFamily}}" 
                font-size="{{svgConfig.textConfig.fontSize}}"
                x="0" y="0" 
                inline-size="200" 
                alignment-baseline="text-before-edge">
                {{line}}
            </text>     
        </g>
    </svg>
</g>

我得到了这样的指令

app.directive('myDirective', [ function() {
    return {
        restrict: 'E',
        templateUrl: './app/myDirective.html',
        controller: 'mySvgController',
        transclude: true
    };
}]);

还有控制器

modernFilterApp.controller('mySvgController', ['$scope', function($scope){
    $scope.init = function(){

        $scope.textFonts = textConfigEnum.data;

        // Container for svg settings
        $scope.svgConfig = {
            text:'',
            textConfig: {
                fontFamily: $filter('getTextConfigByType')(textConfigEnum.info.Arial).fontFamily,
                fontSize: 20,
                fontDecoration: null,
                fontWeigth:null
            },
            distance:{
                X: 0,
                Y: 0
            }
        };
    };

    $scope.init();
}]);

Answer 1

主要问题是你有 svgConfig.textConfig.distance.Y 这是错误的。 distance 属性不属于textConfig 对象，它作为单独的属性保存。因为哪个计算产生了一个值NaN。该值应该是svgConfig.distance.Y

虽然我建议您使用ng-attr-* 属性来动态呈现x 和y 属性值，例如ng-attr-y

</g>
    <svg height="{{svgConfig.height}}" 
        width="{{svgConfig.width}}" 
        ng-attrs-y="{{(svgConfig.fontSize) + 1*svgConfig.textConfig.distance.Y}}">
        <g 
            transform="translate(0, {{svgConfig.distance.Y}})">          
            <text font-family="{{svgConfig.textConfig.fontFamily}}" 
                font-size="{{svgConfig.textConfig.fontSize}}"
                x="0" y="0" 
                inline-size="200" 
                alignment-baseline="text-before-edge">
                {{line}}
            </text>     
        </g>
    </svg>
</g>