AngularJS指令调用控制器函数及解决$digest延迟问题

我完全理解你的困扰——当指令里修改了双向绑定的属性后，立刻调用父控制器的方法，拿到的却是对象的旧值，这确实是AngularJS的$digest循环机制导致的：你修改value后，AngularJS不会立刻同步到父作用域的item对象，而是把更新操作加入到$digest的任务队列中，此时直接调用onChange()，父作用域的item还没完成更新。

下面给你几种可行的解决方案，按推荐程度排序：

方案1：直接传递更新后的值给父控制器（最可靠） #

这种方法不需要依赖AngularJS的生命周期，直接把指令里已经更新好的值作为参数传给父控制器的方法，从根源上避免时机问题。

修改后的代码： #

父模板HTML：

<div ng-repeat="item in mc.items">
  <my-directive value="item.value" on-change="mc.update(item, updatedValue)"></my-directive>
</div>

指令控制器：

var controller = function($scope){
  var $ctrl = this;
  $ctrl.clicked = function(){
    $ctrl.value = $ctrl.value + 1;
    // 调用onChange时传递更新后的值
    $ctrl.onChange({ updatedValue: $ctrl.value });
  };
};

return {
  restrict: 'E',
  scope: {
    value: '=',
    onChange: '&'
  },
  controller: controller,
  controllerAs: '$ctrl',
  bindToController: true,
  templateUrl: 'directive.html'
};

父控制器：

var $ctrl = this; 
$ctrl.items = [ 
  {id: 1, value: 10}, 
  {id: 2, value: 20}, 
  {id: 3, value: 30} 
]; 

$ctrl.update = function(item, updatedValue){
  // 这里可以直接使用传递过来的最新值，也可以同步到item（双向绑定其实已经会做，但更明确）
  item.value = updatedValue;
  console.log("updated item is: " + angular.toJson(item)); 
};

方案2：使用$scope.$evalAsync延迟调用（轻量高效） #

$evalAsync会把你的回调函数放到当前$digest循环的末尾执行，确保在父作用域的item完成更新后再调用update方法，而且不会触发额外的$digest循环，性能更好。

修改后的指令控制器： #

var controller = function($scope){ // 确保注入$scope
  var $ctrl = this;
  $ctrl.clicked = function(){
    $ctrl.value = $ctrl.value + 1;
    // 用$evalAsync延迟到当前digest末尾执行
    $scope.$evalAsync(function() {
      $ctrl.onChange();
    });
  };
};

// 指令配置部分不变
return {
  restrict: 'E',
  scope: {
    value: '=',
    onChange: '&'
  },
  controller: controller,
  controllerAs: '$ctrl',
  bindToController: true,
  templateUrl: 'directive.html'
};

方案3：使用$timeout延迟调用（兼容性最强） #

如果$evalAsync不满足你的场景（比如在原生JS事件中触发更新），可以用$timeout，它会触发一个新的$digest循环，确保所有绑定都同步完成，不过会有轻微的性能开销。

修改后的指令控制器： #

var controller = function($scope, $timeout){ // 注入$timeout
  var $ctrl = this;
  $ctrl.clicked = function(){
    $ctrl.value = $ctrl.value + 1;
    // 用$timeout延迟调用，默认延迟0ms即可
    $timeout(function() {
      $ctrl.onChange();
    });
  };
};

// 指令配置部分不变
return {
  restrict: 'E',
  scope: {
    value: '=',
    onChange: '&'
  },
  controller: controller,
  controllerAs: '$ctrl',
  bindToController: true,
  templateUrl: 'directive.html'
};

为什么原来的代码会拿到旧值？ #

再简单解释下原理：AngularJS的双向绑定依赖$digest循环来同步作用域之间的变化。当你在指令里修改$ctrl.value时，AngularJS会标记这个属性为“脏”，但不会立刻更新父作用域的item.value——它要等到当前的同步任务完成后，才会启动$digest循环去遍历所有脏属性，完成跨作用域的同步。你原来的代码在修改value后立刻调用onChange()，此时$digest还没执行，所以父作用域的item还是旧值。

内容的提问来源于stack exchange，提问作者David Han