Trying to generate an SVG based on data from the scope, but encountering issues with rendering - it comes out empty or displays 'NaN' for some unknown reason.
https://i.sstatic.net/vO70i.png
Additionally, errors are popping up right after the render process:
https://i.sstatic.net/Gw6HM.png
Is there a way to delay the rendering directive until the data is fully ready? Or could there be another underlying reason causing this issue?
The view for the directive appears as follows:
<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>
The directive structure is outlined below:
app.directive('myDirective', [ function() {
return {
restrict: 'E',
templateUrl: './app/myDirective.html',
controller: 'mySvgController',
transclude: true
};
}]);
And here's the related controller code:
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,
fontWeight:null
},
distance:{
X: 0,
Y: 0
}
};
};
$scope.init();
}]);