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

主な問題のようにディレクティブを得ましたはyですouはsvgConfig.textConfig.distance.Yでしたが間違っています。 distanceプロパティはtextConfigオブジェクトに属しておらず、個別プロパティとして保持されています。その計算のために値NaNが生成されます。私は動的に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>