Why does referencing object property passed in as attribute in angular directive cause error?

0
votes

See this plnkr http://plnkr.co/edit/pj4TwkV7icMp4IdyReZP?p=preview An object is being passed in as an attribute of the directive. 

<shape type="person" shirt="blue" dta="{name:'SomeName', age:'21', Hobbies:['reading', 'coding', 'camping'] }"></shape>

The properties are then referenced in the template like so <h1>Age:{{dta.age}}</h1>

Although it correctly displays the property value, it also causes this error $rootScope:infdig] 10 $digest() iterations reached. Aborting! (see console in plnkr). I understand that the error is caused when the model is 'unstable' - but what is causing the instablity in this case? The values / properties don't change. What is the correct way to achieve the same result without the causing the error?

1
javascriptangularjsangularjs-directive

1 Answers

2
votes

This error, I think, just tells you that you created in HTML value too long: {name:'SomeName', age:'21', Hobbies:['reading', 'coding', 'camping'] }.

It's not good practice (MVC pattern) to put model as HTML attribute.

<shape type="person" shirt="blue" dta="{name:'SomeName', age:'21', Hobbies:['reading', 'coding', 'hiking'] }"></shape>

I suggest to create dta Object in controller:

 $scope.dta = {
    name:'SomeName',
    age:'21',
    Hobbies:['reading', 'coding', 'hiking'] 
    };

and change shape element like:

<shape type="person" shirt="blue" dta="dta"></shape>

See Demo Fiddle