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

知道这里发生了什么吗？视图确实呈现输入,但抛出无限错误摘要错误.文档也不是很有帮助.

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>