Ng-bind-html gives an infinite digest error ($ rootScope.infdig)

Question

If I use a function with regular ng-bind , everything seems to be fine. But if I used ng-bind-html , I get an infinite digest error.

 === View === 1. <span ng-bind="test()"> 2. <span ng-bind-html="test()"> === Controller === 1. $scope.test = function() { return 1; } 2. myapp.controller('myapp', function($scope, $sce) { $scope.test = function() { return $sce.trustAsHtml('<input></input>'); } }); 

Any idea what is going on here? The view concludes, but throws this error with an error. The documentation is also not very useful.

Answer 1

The problem is that when your ng-bind-html is evaluated, Angular calls your test function and gets the result $sce.trustAsHtml('<input></input>') . Angular then evaluates all the bindings again to see if everything is installed. This means that it calls your test function again and sees if the return value matches the old value. Unfortunately not. This is because the values ​​returned from $ sce.trustAsHtml are not comparable using === .

Try this as proof:

 console.log($sce.trustAsHtml('<input></input>') === $sce.trustAsHtml('<input></input>')); 

This will print false. This means that every time Angular calls your test function, it returns a different value as far as it goes. He tries several times, and then refuses.

If instead of binding the result of $ sce.trustAsHtml in a variable scope, instead of calling a function, a problem arises:

 $scope.input = $sce.trustAsHtml('<input></input>'); <span ng-bind-html="input"></span>