NG-绑定-HTML给人无限消化错误（$ rootScope.infdig） [英] ng-bind-html gives an infinite digest error ($rootScope.infdig)

问题描述

如果我用一个函数与正规 NG-绑定，似乎一切都很好。但如果我是使用 NG-绑定-HTML ，我收到了无限的消化错误。

If I use a function with the regular ng-bind, everything seems to be fine. But if I were to use ng-bind-html, I receive the infinite digest error.

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

任何想法是怎么回事？这个视图渲染的投入，但抛出无限错误消化错误。该文档是不是非常有帮助无论是。

Any idea what's going on here? The view does render the input, but throws that infinite error digest error. The documentation isn't very helpful either.

推荐答案

现在的问题是，当你的 NG-绑定-HTML 进行评估，角调用你的测试功能，获得 $ sce.trustAsHtml的结果（'＆LT;输入＆GT;＆LT; /输入＆GT;'）。角然后计算所有绑定的再看看是否一切都已经尘埃落定。这意味着再次调用您的测试功能，如果返回值相匹配的旧值情思。不幸的是，事实并非如此。这是因为从价值$ sce.trustAsHtml返回没有可比性通过 === 。

The problem is that when your ng-bind-html is evaluated, Angular calls your test function and gets the result of $sce.trustAsHtml('<input></input>'). Angular then evaluates all of the bindings again to see if everything has settled. This means it once again calls your test function, and sees if the return value matches the old value. Unfortunately, it does not. This is because the values return from $sce.trustAsHtml are not comparable via ===.

试试这个作为证明：

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

这将打印假的。这意味着，每角每次调用你的测试功能，只要我们关心它返回不同的值。它试图多次，然后放弃

That will print false. This means that each and everytime Angular calls your test function, it's returning a different value as far as it's concerned. It tries a number of times and then gives up.

如果您不是绑定$ sce.trustAsHtml的结果变成范围的变量，而不是一个函数调用，问题消​​失：

If you instead bind the result of $sce.trustAsHtml into a scope variable rather than a function call, the problem goes away:

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

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

这篇关于NG-绑定-HTML给人无限消化错误（$ rootScope.infdig）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！