Best IT Recipes

Angularjs skips newly created array in attribute to directive

I created this script to show my problem ...

http://jsfiddle.net/dQDtw/

I pass the newly created array to the directive and everything works fine. However, I get an error in the console window:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Any thoughts on what I need for massage to cleanse this? I would like to be able to reuse the directive without having 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}}" }; });
+9
angularjs angularjs-directive
Dec 28 '13 at 5:55
source share
3 answers

This error is due to the fact that your directive cannot interpret the array as an array. Try the following:

 <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 can pass it as an attribute and parse it into 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 .

+11
Dec 28 '13 at 6:03
source share

JSON parsing does not work so efficiently when the array contains a string.

For example:

 <file-handler fh-services="['BOX','DROPBOX']"></file-handler>

In the directive, you can use scope.$eval to convert what appears in the attribute into an array.

 scope.$eval(attrs.fhServices)
+12
Aug 15 '15 at 12:22
source share

What about:

 <body ng-app="myApp"> <test-dir fam-people='1;4;6'> </test-dir> <test-dir fam-people='2;1;0'> </test-dir> </body>

and

  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= attrs.famPeople.split(';'); } }; });

clean solution?

0
Sep 19 '14 at 10:29
source share


More articles:


All Articles