8

通常の関数を使用すると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>');
    }
});

ここで何が起こっているのか分かりますか？ビューは入力をレンダリングしますが、その無限エラーダイジェスト エラーをスローします。ドキュメントもあまり役に立ちません。

4

1 に答える 1

17

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

これを証拠として試してください：

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

それはfalseを出力します。これは、Angular がテスト関数を呼び出すたびに、関係する限り異なる値を返すことを意味します。それは何度も試みますが、あきらめます。

$sce.trustAsHtml の結果を関数呼び出しではなくスコープ変数にバインドすると、問題は解決します。

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

<span ng-bind-html="input"></span>
于 2013-10-14T22:03:34.483 に答える