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

知道这里发生了什么吗？该视图确实渲染了输入，但抛出了无限错误摘要错误。该文档也不是很有帮助。

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>