如何在自定義指令中添加SVG angularjs標籤？

我想根據數據製作不同顏色矩形的xy圖。 X是天，Y是一天中的小時。它是一個活動圖。如何在自定義指令中添加SVG angularjs標籤？

的index.html

<html> 
<body> 
    <script src="js/angular.js"></script> 
    <script> 
     var app = angular.module("app",[]); 
     app.controller("controller",function($scope){ 

     }); 
     app.directive("graph",function(){ 
      return { 
       controller:function($scope){ 
        $scope.val=50; 
       }, 
       templateUrl:"test.html", 
       scope:{ 
        code:"=" 
       }, 
       restrict:"E" 
      } 
     }); 
    </script> 
    <div ng-app="app" ng-controller="controller"> 
     <graph></graph> 
    </div> 
</body> 
</html>

的test.html

<svg> 
    <rect x="0" x="0" ng-attr-width="{{val}}" ngheight="50"></rect> 
</svg>

來源

2014-09-01 Montu

這裏是將與SVG代替的簡單指令的一個例子：

var app = angular.module('app', []); 

app.directive('graph', function(){ 
    return { 
    replace: true, 
    restrict: 'E', 
    scope: { 
     data: '=' 
    }, 
    template: '<svg><g><rect ng-repeat="item in data" x="{{item.x}}" y="{{item.y}}" width="{{item.width}}" height="{{item.height}}"></rect></g></svg>' 
    }; 
});

將用於如在following plunker中那樣。但是，這種

注：

當DOM被解析，因爲{{item.x}}是直到表達是由角評估x屬性的有效值你會得到一堆錯誤。您可以通過定義可將評估值應用於DOM的自定義graph-x，graph-y，graph-*指令來克服此問題。更多細節可以在這個issue找到。
如果你想做更復雜的事情，我建議你看看一個偉大的圖書館D3.js這就像jQuery svg中的數據可視化。

來源

2014-09-01 06:32:01 miensol

ty @miensol您的回覆。我嘗試從頭開始，它的工作！文檔在angularjs.org上。 ng-attr-x工作！ [截圖]（http://pic.twitter.com/Un2x7bg6rq） – Montu 2014-09-03 07:52:47

如何在自定義指令中添加SVG angularjs標籤？

回答

相關問題