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