如果我使用带有常规 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 .该文档也不是很有帮助。
最佳答案
问题是当你的 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>
关于angularjs - ng-bind-html 给出一个无限的摘要错误 ($rootScope.infdig),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19369406/