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>

ng-bind-html给出了无限的摘要错误（$ rootScope.infdig）

1 个答案: