javascript - AngularJS 动态 SVG 显示

Question

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

另外，渲染后我遇到了这样的错误

如何在数据准备好之前阻止渲染指令？或者也许是其他原因导致这种情况发生，您认为是什么？

我得到了看起来像这样的指令的 View

<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
    };
}]);

和 Controller

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-* 属性来像 ng 一样动态渲染 x 和 y 属性值-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>