用AngularJS解析SVG

我對AngularJS和SVG都是新手，所以如果我正在做一些可怕的錯誤，我很抱歉。用AngularJS解析SVG

我試圖創建AngularJS的SVG模式：

模板：

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <pattern id="grid" width="{{cubeWidth}}" height="{{cubeHeight}}" patternUnits="userSpaceOnUse"> 
      <path d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <path d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>--> 
     </pattern> 

    </defs> 

    <rect width="100%" height="100%" fill="url(#grid)"/> 
</svg>

控制器：

'use strict'; 

angular.module('gridifyApp') 
    .controller('MainCtrl', function ($scope) { 

     var docWidth = document.width; 
     var columns = 12; 
     var cubeWidth = docWidth/columns; 
     var cubeHeight = 44; 

     $scope.cubeWidth = cubeWidth; 
     $scope.cubeHeight = cubeHeight; 
    });

看來工作但我得到一個控制檯錯誤： console error for angularJS view

任何想法爲什麼？

來源

2013-07-26 Guy

專門爲您提供幫助可能爲時已晚，但我剛剛發表了關於AngularJS + SVG的文章。 http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS –

問題是SVG被解析前角能夠做任何事情，所以用雙大括號的值無效之前角度得到它。 Angular團隊增加了一種方法來定義某種「延遲綁定」。您可以通過在ng-attr-前加上所需的屬性來使用它。它等待，直到綁定評估有效並添加具有適當值的真實屬性。在你的情況下它會是：

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <pattern id="grid" ng-attr-width="{{cubeWidth}}" ng-attr-height="{{cubeHeight}}" patternUnits="userSpaceOnUse"> 
      <path ng-attr-d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <path ng-attr-d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>--> 
     </pattern> 

    </defs> 

    <rect width="100%" height="100%" fill="url(#grid)"/> 
</svg>

應該沒有錯誤了。記得更新你的角度版本。

來源

2013-07-28 11:20:12

SVG解析發生在AngularJS可以設置任何變量之前。您可以嘗試以編程方式創建SVG：

來源

2013-07-26 21:01:40

用AngularJS解析SVG

回答

相關問題