angularjs-ng-repeat – 使用带有anglejs ng-repeat的svg
发布时间:2020-12-17 09:17:18 所属栏目:安全 来源:网络整理
导读:我正在学习 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’只是一个简单的数组
我正在学习
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]; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |