angularjs pass newly created array in attribute to directive

Question

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}}"
                   };
    });

ms87 · Accepted Answer · 2013-12-28 06:24:43Z

15

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.

edited Dec 28, 2013 at 6:24

answered Dec 28, 2013 at 6:03

ms87

17.5k23 gold badges89 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob G Over a year ago

Thanks, that would probably work. But I'd like to be able to reuse the directive without updates to a controller. I've updated my questions to be more specific

Rob G Over a year ago

Thanks, I think the edit is more in line with what I'm looking for.

filype · Accepted Answer · 2015-08-15 12:22:05Z

14

JSON parse doesn't work as effective when the array contains 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 to an array.

scope.$eval(attrs.fhServices)

answered Aug 15, 2015 at 12:22

filype

8,47010 gold badges46 silver badges70 bronze badges

2 Comments

plong0 Over a year ago

I agree that this looks like the more proper solution when you aren't using data-binding.

James-Jesse Drinkard Over a year ago

This is exactly what I needed for a requirement I was working on. Thanks for posting!

Luca Trazzi · Accepted Answer · 2014-09-19 10:29:26Z

0

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(';');
                        }
                       };
        });

cleanest solution?

answered Sep 19, 2014 at 10:29

Luca Trazzi

1,2601 gold badge13 silver badges32 bronze badges

Collectives™ on Stack Overflow

angularjs pass newly created array in attribute to directive

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related