将SVG与angularjs ng-repeat一起使用

问题描述

我正在学习angularjs，并且尝试使用ng-repeat创建svg图.

I am learning angularjs and I am trying use ng-repeat to create an svg graph.

我有这个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>

范围"只是一个在控制器中定义的简单数组，如下所示:

the 'range' is just a simple array which is defined in controller like this:

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

html正在运行； rects呈现在我的页面上.

the html is working; the rects are rendered on my page.

但是，Chrome不断抛出以下错误:

However, Chrome keeps throwing the following error:

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

似乎不太喜欢我在做什么...

It seems that it does not quite like what I am doing...

有人知道我为什么收到此错误吗?

Does anyone have an idea why I'm receiving this error?

推荐答案

问题是Chrome将Angular插值str视为这些属性的无效值(因为至少一次元素实际上存在于DOM中-尽管看不见-带有无效"值).我编写了一个与其他Angular解决方案一致的解决方案，其中涉及浏览器对特殊属性的处理，其中您指定了ng-x，ng-y，ng-width和ng-而不是使用x，y，width和height.值插入后设置高度和实数属性.

The problem is Chrome sees the Angular interpolation str as an invalid value for those attributes (since at least at one time the element actually exists in the DOM -- though invisibly -- with "invalid" values). I have written a solution that is in line with other Angular solutions as to browser handling of special attributes where instead of using x, y, width, and height, you specify ng-x, ng-y, ng-width, and ng-height and the real attributes are set after the values are interpolated.

这是JSFiddle上的解决方案 .我将向Angular提交补丁，以查看是否可以在内核中获取它.

Here is the solution on JSFiddle. I'm going to submit a patch to Angular to see if we can get this in the core.

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', function() {
        return function(scope, elem, attrs) {
            attrs.$observe('ngY', function(y) {
                elem.attr('y', y);
            });
        };
    })
    .directive('ngWidth', function() {
        return function(scope, elem, attrs) {
            attrs.$observe('ngWidth', function(width) {
                elem.attr('width', width);
            });
        };
    })
    .directive('ngHeight', function() {
        return function(scope, elem, attrs) {
            attrs.$observe('ngHeight', function(height) {
                elem.attr('height', height);
            });
        };
    });

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

这篇关于将SVG与angularjs ng-repeat一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！