Using JSON in HTML attribute throws error

[bbrewder]

If you use JSON in an HTML attribute that is used in a '=' scope variable, it throws the error "[$rootScope:infdig] 10 $digest() iterations reached. Aborting!".

Here is a simple Plunker that shows the error.

http://plnkr.co/edit/B3NZSXbGsNyJec4PaFd4?p=preview

Everything seems to work fine except for this error (it seems to bind OK anyway). Just passing the attribute value as a string and calling scope.$eval within the link function seems to work, though I'm not sure if you would get 2-way data binding that way if the value was passed as an object instead of JSON.

The code should either be fixed to support inline JSON or a more explicit error should be thrown if JSON is being sent in from the attribute. If an error is thrown, it would be nice to include in the documentation on it what the work around is (scope.$eval?) and any limitations (2-way data binding broken?).

[lord2800]

The problem here is that you're creating a new object every time the watcher looks at the value, which causes $digest to think the value was dirty, which causes another $digest loop. You should assign that object to a $scope property (thereby only creating it once) or use ng-init (also creating it only once).

[bbrewder]

Thanks for responding. If you take a look at the sample code you will see that I only define the JSON once, in the HTML. The problem is that Angular (not me) is creating a new object every time the watcher looks at the value.

My suggestion is that Angular should check whether the attribute is JSON and if it is, either only process it once then store the JS object instead of the JSON string or throw an exception stating that it cannot handle JSON and how to get around it (at least this would save developers a lot of time).

[caitp]

http://plnkr.co/edit/VdSrFtVOj8u7ki3lP1Ef?p=preview (see script.js and web console), the thing is that although the $parse function is only created once, the populated object is actually created each time the getter is invoked.

This is typically not a problem, it's just something to be aware of

Oh, the $watcher is automatically removed if the parsed getter is a constant, as in this case... so it will only ever trigger the watch function once

https://github.com/angular/angular.js/blob/master/src/ng/rootScope.js#L337