AngularJS v1.2.x $digest() 无限循环指令隔离作用域对象参数 [英] AngularJS v1.2.x $digest() infinite loop Directive isolated scope object param

问题描述

问题的简化版，查看web开发控制台:http://plnkr.co/edit/3wKmWz?p=预览

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:

那么为什么将对象传递给具有隔离作用域的指令会导致 $digest() 无限循环?

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

推荐答案

这是因为您将函数作为 2 路绑定传递到指令中，这不是您应该做的，要么使用2路绑定:

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

参见 plunk.

这篇关于AngularJS v1.2.x $digest() 无限循环指令隔离作用域对象参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！