angularjs通过新创建的阵列中的属性指令 [英] angularjs pass newly created array in attribute to directive
问题描述
我创建这个小提琴显示我的问题...
我传递一个新创建的阵列指令，一切工作了就好了。但是，我越来越在控制台窗口中的错误，指出：
错误：[$ rootScope：infdig] 10 $摘要（）迭代到达。中止！
这是什么，我需要按摩来打扫一下有什么想法？我想能够重用的指示，而不需要更新控制器
下面是HTML
＆LT;机身NG-应用=对myApp＆GT;
＆lt;试验-DIR FAM-人='[1,4,6]'＆GT; ＆LT; /测试DIR＆GT;
＆lt;试验-DIR FAM-人='[2,1,0]'＆GT; ＆LT; /测试DIR＆GT;
＆LT; /身体GT;
下面是JS。
VAR对myApp = angular.module（'对myApp'，[]）;
myApp.directive（'TESTDIR'，函数（）{
返回{限制：'E'
，适用范围：{famPeople：'= famPeople'}
，模板：＆LT;＆OL GT;＆LT;李NG重复='P在famPeople'＆GT; {{P}}
};
}）;
这错误是因为你的指令是不能够跨$ P $数组作为数组PT，试试这个：
＆LT;机身NG-应用=对myAppNG控制器=CTRL1＆GT;
＆lt;试验-DIR FAM-人='人'＆GT; ＆LT; /测试DIR＆GT;＆LT; /身体GT;VAR对myApp = angular.module（'对myApp'，[]）;myApp.directive（'TESTDIR'，函数（）{
返回{限制：'E'
，适用范围：{famPeople：'='}
，模板：＆LT;＆OL GT;＆LT;李NG重复='P在famPeople'＆GT; {{P}}
};
}）;
控制器和指令：
myApp.controller（CTRL1功能（$范围）{
$ scope.people = [1,4,6];
}）;
修改
或者你可以在把它作为一个属性，并将其解析到一个数组：
＆LT;机身NG-应用=对myApp＆GT;
＆lt;试验-DIR FAM-人='[1,4,6]'＆GT; ＆LT; /测试DIR＆GT;＆LT; /身体GT;
指令：
VAR对myApp = angular.module（'对myApp'，[]）;myApp.directive（'TESTDIR'，函数（）{
返回{限制：'E'，
//范围：{famPeople：'='}，
模板：＆LT;＆OL GT;＆LT;李NG重复='在人们p通过跟踪指数$'＆GT; {{P}}，
链接：功能（范围，元素，ATTRS）{
scope.people = JSON.parse（attrs.famPeople）;
}
};
}）;
请参阅小提琴。
I've created this fiddle to show my issue...
I'm passing a newly created array to a directive, and everything is working out just fine. However, I'm getting an error in the console window indicating:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Any thoughts on what I need to massage to clean this up? I'd like to be able to reuse the directive without the need to update the controller.
Here is the html
<body ng-app="myApp">
<test-dir fam-people='[1,4,6]'> </test-dir>
<test-dir fam-people='[2,1,0]'> </test-dir>
</body>
Here is the JS.
var myApp = angular.module('myApp', []);
myApp.directive('testDir', function() {
return { restrict: 'E'
, scope: { famPeople: '=famPeople' }
, template: "<ol> <li ng-repeat='p in famPeople'> {{p}}"
};
});
That error is because your directive is not able to interpret the array as an array, Try this:
<body ng-app="myApp" ng-controller="ctrl1">
<test-dir fam-people='people'> </test-dir>
</body>
var myApp = angular.module('myApp', []);
myApp.directive('testDir', function() {
return { restrict: 'E'
, scope: { famPeople: '=' }
, template: "<ol> <li ng-repeat='p in famPeople'> {{p}}"
};
});
Controller and directive:
myApp.controller("ctrl1",function($scope){
$scope.people=[1,4,6];
});
EDIT
or you could pass it in as an attribute and parse it to an array:
<body ng-app="myApp" >
<test-dir fam-people='[1,4,6]'> </test-dir>
</body>
Directive:
var myApp = angular.module('myApp', []);
myApp.directive('testDir', function() {
return { restrict: 'E',
//scope: { famPeople: '=' },
template: "<ol> <li ng-repeat='p in people track by $index'> {{p}}",
link:function(scope, element, attrs){
scope.people=JSON.parse(attrs.famPeople);
}
};
});
See fiddle.
这篇关于angularjs通过新创建的阵列中的属性指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
