angularjs-ng-repeat – 使用带有anglejs ng-repeat的svg

我正在学习 angularjs,我正在尝试使用ng-repeat创建一个svg图.

我有这个html：

<svg>
    <g id="g_{{$index}}" ng-repeat="i in range" ng-cloak>
        <rect x="{{i / 5}}" y="{{i / 5}}" width="{{i / 5}}" height="{{i / 5}}"></rect>
    </g>
</svg>

‘range’只是一个简单的数组,它在控制器中定义如下：

$scope.range = [100,200,300];

html正在工作;矩形在我的页面上呈现.

但是,Chrome会持续发生以下错误：

Error: Invalid value for <rect> attribute height="{{i / 5}}"    js/angular.js:1584
  JQLiteClone   js/angular.js:1584
  JQLite.(anonymous function)   js/angular.js:2163
  publicLinkFn  js/angular.js:3862
  ngRepeatWatch js/angular.js:13641
  Scope.$digest js/angular.js:7889
  Scope.$apply  js/angular.js:8097
    js/angular.js:961
  invoke    js/angular.js:2857
  resumeBootstrapInternal   js/angular.js:959
  bootstrap js/angular.js:973
  angularInit   js/angular.js:934
    js/angular.js:14756
  fire  js/jquery-2.0.0.js:2863
  self.fireWith js/jquery-2.0.0.js:2975
  jQuery.extend.ready   js/jquery-2.0.0.js:398
  completed js/jquery-2.0.0.js:93

似乎这不像我在做什么…

有没有人有一个想法为什么我收到这个错误？

问题是Chrome将角度插值str视为这些属性的无效值(因为至少有一次该元素实际上存在于DOM中 – 尽管不可见 – 具有“无效”值).我写了一个解决方案,与浏览器处理特殊属性的其他角度解决方案相一致,而不是使用x,y,width和height,您可以指定ng-x,ng-y,ng-width和ng-高度并且在内插值之后设置真实属性.

这是解决方案on JSFiddle.我要提交一个补丁到Angular,看看我们是否可以得到这个核心.

HTML

<div ng-app="SampleApp" ng-controller="MainCtrl">
    <svg>
        <g id="g_{{$index}}" ng-repeat="i in range" ng-cloak>
            <rect ng-x="{{i / 5}}" ng-y="{{i / 5}}" ng-width="{{i / 5}}" ng-height="{{i / 5}}"></rect>
        </g>
    </svg>
</div>

JS

angular.module('SampleApp',[],function() {})
    .directive('ngX',function() {
        return function(scope,elem,attrs) {
            attrs.$observe('ngX',function(x) {
                elem.attr('x',x);
            });
        };
    })
    .directive('ngY',attrs) {
            attrs.$observe('ngY',function(y) {
                elem.attr('y',y);
            });
        };
    })
    .directive('ngWidth',attrs) {
            attrs.$observe('ngWidth',function(width) {
                elem.attr('width',width);
            });
        };
    })
    .directive('ngHeight',attrs) {
            attrs.$observe('ngHeight',function(height) {
                elem.attr('height',height);
            });
        };
    });

function MainCtrl($scope) {
    $scope.range = [100,300];
}