AngularJS динамическое отображение SVG

Question

AngularJS динамическое отображение SVG

0

Я хочу нарисовать 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();
}]);

DanilGholtsman 12 авг. 2016, в 22:59

Источник

Теги:

javascript

angularjs

svg

1 ответ

Ещё вопросы

Pankaj Parkar · Accepted Answer · 2016-08-12T19-08-00.000Z

Основная проблема заключается в том, что у вас есть 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>

Вау, твой ответ мне очень помог! Спасибо. Да, извините за мой грязный код, я очень беспокоюсь, когда пишу это ночью
@DanilGholtsman не проблема, приятно слышать, что это помогло, спасибо;)