ng-bind-html restituisce un errore di digest infinito ($ rootScope.infdig)

Question

Se utilizzo una funzione con il normale ng-bind, tutto sembra andare bene. Ma se dovessi usare ng-bind-html, ricevo l'errore di digest infinito.

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

Qualche idea di cosa sta succedendo qui? La vista rende l'input, ma genera quell'errore infinito digest error. La documentazione non è molto utile neanche.

Answer 1

Il problema è che quando viene valutato il valore ng-bind-html, Angular chiama la funzione di test e ottiene il risultato di $sce.trustAsHtml('<input></input>'). Angolare quindi valuta nuovamente tutti i collegamenti per vedere se tutto è stato risolto. Ciò significa che richiama ancora una volta la funzione di test e vede se il valore restituito corrisponde al vecchio valore. Sfortunatamente no. Questo perché i valori restituiti da $ sce.trustAsHtml non sono confrontabili con ===.

Prova questa come una prova:

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

che stamperà falso. Ciò significa che ogni volta che Angular chiama la funzione di test, restituisce un valore diverso per quanto lo riguarda. Prova un certo numero di volte e poi si arrende.

Se invece si associa il risultato di $ sce.trustAsHtml in una variabile ambito piuttosto che una chiamata di funzione, il problema scompare:

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

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