AngularJS v1.2.x $消化（）无限循环指令孤立的范围对象参数 [英] AngularJS v1.2.x $digest() infinite loop Directive isolated scope object param

问题描述

简化问题的版本，浏览网页开发者控制台： http://plnkr.co /编辑/ 3wKmWz？p = preVIEW

 未捕获的错误：[$ rootScope：infdig] 10 $摘要（）迭代到达。中止！
观察家在过去的5次迭代解雇：
 

那么，为什么传递对象与一个孤立的范围指令导致无限$消化（）循环？

  //控制器
// AngularJS 1.2.x的无限摘要返回对象到指令时，因
$ scope.ctrlObjReturnFn =功能（）{
  返回{测试：真正};
}//视图
＆LT; D​​IV测试DIR破对象=ctrlObjReturnFn（）＆GT;＆LT; / DIV//指令
app.directive（'TESTDIR'，函数（）{
  返回{
    适用范围：{breakingObject：'='}，
    链接：功能（范围，元素，ATTRS）{
      element.html（'印物镜：+ scope.breakingObject.toString（））;
    }
  }
}）;
 

解决方案

这是因为你在一个函数传递一个2路结合成指令，这是不是你应该做的事情，或者使用传递对象2路绑定：

 范围：{breakingObject：'='}，＆LT; D​​IV测试DIR破对象=ctrlObjReturnFn＆GT;＆LT; / DIV＆GT;$ scope.ctrlObjReturnFn = {测试：真正};
 

或使用1路绑定功能：

 范围：{breakingObject：'和;' }，＆LT; D​​IV测试DIR破对象=ctrlObjReturnFn（）＆GT;＆LT; / DIV＆GT;$ scope.ctrlObjReturnFn =功能（）{
   返回{测试：真正};
}
 

见普拉克。

Simplified version of problem, view web dev console: http://plnkr.co/edit/3wKmWz?p=preview

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations:

So why does passing an object into a directive with an isolated scope cause an infinite $digest() loop?

// controller
// AngularJS 1.2.x infinite digest caused when returning object into directive
$scope.ctrlObjReturnFn = function() {
  return {test:true};
}

// view
<div test-dir breaking-object="ctrlObjReturnFn()"></div

// directive
app.directive('testDir', function() {
  return {
    scope: { breakingObject: '=' },
    link: function(scope, element, attrs) {
      element.html('printed obj: ' + scope.breakingObject.toString());
    }
  }
});

解决方案

This is because you're passing in a function as a 2 way binding into the directive, which is not what you should be doing, either pass an object using 2 way binding:

scope: { breakingObject: '=' },

<div test-dir breaking-object="ctrlObjReturnFn"></div>

$scope.ctrlObjReturnFn =  {test:true};

or a function using 1 way binding:

scope: { breakingObject: '&' },

<div test-dir breaking-object="ctrlObjReturnFn()"></div>

$scope.ctrlObjReturnFn = function() {
   return {test:true};
}

See plunk.

这篇关于AngularJS v1.2.x $消化（）无限循环指令孤立的范围对象参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！