ng-bind-htmlは無限のダイジェストエラー（$ rootScope.infdig）を与えます

Question

普通のng-bindの関数を使用すると、すべて正常であるようです。しかし、ng-bind-htmlを使用すると、無限のダイジェストエラーが発生します。

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

何が起こっているのですか？ビューは入力をレンダリングしますが、無限のエラーdigest errorをスローします。ドキュメンテーションはあまり役に立ちません。

Answer 1

問題は、ng-bind-htmlが評価されたときに、Angularがテスト関数を呼び出して、$sce.trustAsHtml('<input></input>')という結果を得ることです。 Angularはすべてのバインディングを再度評価し、すべてが収まったかどうかを確認します。つまり、再度テスト関数を呼び出し、戻り値が古い値と一致するかどうかを確認します。残念ながら、それはしません。これは、$ sce.trustAsHtmlから返される値が===で比較できないためです。

が証拠としてこれを試してみてください：偽印刷します

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

。これは、Angularがあなたのテスト関数を呼び出すたびに、それが関係する限り異なる値を返すことを意味します。それは何回も試みてから放棄します。

あなたの代わりにスコープ変数ではなく、関数呼び出しに$ sce.trustAsHtmlの結果をバインドする場合は、問題が消える：

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

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