AngularJS dynamic SVG displaying

Question

I want to draw svg from data I got in scope. But when it renders it partically empty or NaN for some reason.

Also, I got errors like here right after render

How to prevent render directive until data is ready? Or maybe its other reason why its happening like that, what do you think?

I got view for directive which looks like that

<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>

And I got directive like that

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

And the 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

The main problem is you had svgConfig.textConfig.distance.Y which is wrong. distance property doesn't belongs to textConfig object, it is kept as individual property. Because of which calculation is producing a value NaN. That value should be svgConfig.distance.Y

Though I would suggest you to use ng-attr-* attribute to rendering x & y attribute value dynamically like 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>