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

知道这里发生了什么吗？ View 会渲染输入，但会抛出无限错误 digest error .该文档也不是很有帮助。

Answer 1

问题是当你的 ng-bind-html被评估，Angular 调用你的测试函数并得到 $sce.trustAsHtml('<input></input>') 的结果.然后 Angular 再次评估所有绑定(bind)以查看是否一切都已解决。这意味着它再次调用您的测试函数，并查看返回值是否与旧值匹配。不幸的是，事实并非如此。这是因为从 $sce.trustAsHtml 返回的值无法通过 === 进行比较。 .

试试这个作为证据:

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

那将打印错误。这意味着每次 Angular 调用你的测试函数时，它都会返回一个不同的值。它尝试了很多次，然后放弃了。

如果您改为将 $sce.trustAsHtml 的结果绑定(bind)到范围变量而不是函数调用中，问题就会消失:

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

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