将 svg 与 angularjs ng-repeat 一起使用 [英] Use svg with angularjs ng-repeat

问题描述

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

我有这个 html:

'range' 只是一个简单的数组，在控制器中定义如下:

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

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

然而，Chrome 不断抛出以下错误:

错误: 的值无效属性高度="{{i/5}}" js/angular.js:1584JQLiteClone js/angular.js:1584JQLite.(匿名函数) js/angular.js:2163publicLinkFn js/angular.js:3862ngRepeatWatch js/angular.js:13641范围.$digest js/angular.js:7889Scope.$apply js/angular.js:8097js/angular.js:961调用 js/angular.js:2857resumeBootstrapInternal js/angular.js:959引导程序 js/angular.js:973angularInit js/angular.js:934js/angular.js:14756火 js/jquery-2.0.0.js:2863self.fireWith js/jquery-2.0.0.js:2975jQuery.extend.ready js/jquery-2.0.0.js:398完成 js/jquery-2.0.0.js:93

好像和我做的不太一样...

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

解决方案

问题是 Chrome 将 Angular 插值 str 视为这些属性的无效值(因为至少有一次该元素实际上存在于 DOM 中——尽管无形 - 具有无效"值).我已经编写了一个与其他 Angular 解决方案一致的解决方案，关于特殊属性的浏览器处理，其中不使用 x、y、宽度和高度，而是指定 ng-x、ng-y、ng-width 和 ng-高度和真实属性是在插值后设置的.

这是 JSFiddle 上的解决方案.我将向 Angular 提交一个补丁，看看我们是否可以在核心中获得它.

HTML

JS

angular.module('SampleApp', [], function() {}).directive('ngX', function() {返回函数(范围，元素，属性){attrs.$observe('ngX', function(x) {elem.attr('x', x);});};}).directive('ngY', function() {返回函数(范围，元素，属性){attrs.$observe('ngY', function(y) {elem.attr('y', y);});};}).directive('ngWidth', function() {返回函数(范围，元素，属性){attrs.$observe('ngWidth', function(width) {elem.attr('宽度', 宽度);});};}).directive('ngHeight', function() {返回函数(范围，元素，属性){attrs.$observe('ngHeight', function(height) {elem.attr('高度', 高度);});};});函数 MainCtrl($scope) {$scope.range = [100, 200, 300];}

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

I have this 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];

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

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?

解决方案

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.

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 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！