ng-bind-html daje nieskończony błąd trawienia ($ rootScope.infdig)

Question

Jeśli używam funkcji ze standardowym ng-bind, wszystko wydaje się być w porządku. Ale gdybym użył ng-bind-html, otrzymam nieskończony błąd trawienia.

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

Czy masz pojęcie, co się tutaj dzieje? Widok renderuje dane wejściowe, ale generuje nieskończony błąd digest error. Dokumentacja również nie jest zbyt pomocna.

Answer 1

Problem polega na tym, że kiedy oceniany jest ng-bind-html, Angular wywołuje funkcję testową i otrzymuje wynik $sce.trustAsHtml('<input></input>'). Angular następnie ocenia wszystkie wiązania ponownie, aby sprawdzić, czy wszystko się uspokoiło. Oznacza to, że ponownie wywołuje funkcję testową i widzi, czy zwracana wartość pasuje do starej wartości. Niestety tak nie jest. Dzieje się tak dlatego, że wartości zwracane z $ sce.trustAsHtml nie są porównywalne za pośrednictwem ===.

Spróbuj to jako dowód:

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

To będzie drukować fałszywe. Oznacza to, że za każdym razem, gdy Angular wywołuje twoją funkcję testową, zwracana jest inna wartość, o ile jej to dotyczy. Próbuje kilka razy, a potem się poddaje.

Jeśli zamiast wiązać wynik $ sce.trustAsHtml do zmiennej zakres zamiast wywołania funkcji, problem zniknie:

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

<span ng-bind-html="input"></span>