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

小编典典

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

angularjs

如果我将一个函数与regular一起使用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>');
    }
});

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

阅读 218

2020-07-04

共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>

2020-07-04