隔离范围未更新

Question

我有以下代码：

var testApp = angular.module('testApp', []);

testApp.directive('myDirective', function () {
    return {
        scope: {
            child: '=child'
        },
        
        controller: function ($scope, $element, $attrs) {
            $scope.$on('childChanged', function (event, newChild) {
                if ($scope.child.id != newChild.id) {
                    alert("The child in the isolated scope is not updated!");
                }
                else {
                    alert("success");                    
                }
            });
        }
    };
});

testApp.controller('myController', function ($scope) {
    $scope.parentObject = {childObject: {id:1}};
    $scope.changeChild = function changeChild()
    {
        var newChild = { id: $scope.parentObject.childObject.id + 1};
        $scope.parentObject.childObject = newChild;
        //$scope.$apply(); //This solves the problem
        $scope.$broadcast('childChanged', newChild);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="testApp">
    <div data-ng-controller="myController">        
        <div my-directive child="parentObject.childObject"></div>
        <button data-ng-click="changeChild()">Change Child</button>
    </div>
</div>

解释：

• 我正在为指令创建一个隔离范围，具有双向 绑定到父范围的对象 (parentObject.childObject)。
• 当点击按钮时，函数 changeChild 被调用 我的控制器。该功能将取代 $scope.parentObject.childObject 与另一个孩子，并将 广播活动。
• 此事件的侦听器位于指令的控制器中。在里面 侦听器，我们检查孤立范围（$scope.child）中的孩子是否是 与事件中发送的相同（即父母的 scope.parentObject.childObject）。 我们看到他们不一样，这意味着我们收到的孩子 隔离范围尚未更新。

请注意，如果我在广播之前使用 $scope.$apply()，那么指令控制器中的 $scope.child 将被更新，但是，它会抛出以下异常：“$apply already in progress”。

有人可以帮我理解这里发生了什么吗？为什么 $scope.$apply 有帮助，即使它只抛出了一个异常？如何在不调用 $scope.$apply 的情况下解决这个问题？ 我想知道是否有一种方法可以确保隔离范围中的绑定属性在父范围中发生更改后得到更新，而无需在事件中传递它。

谢谢

Answer 1

您可以在更新 child.id 后使用 $timeout 调用下一个摘要周期

请看下面的演示

var testApp = angular.module('testApp', []);

testApp.directive('myDirective', function() {
  return {
    scope: {
      child: '=child'
    },

    controller: function($scope, $element, $attrs) {
      $scope.$on('childChanged', function(event, newChild) {

        if ($scope.child.id != newChild.id) {
          alert("The child in the isolated scope is not updated?");
        } else {
          alert("success");
        }
      });

    }
  };
});

testApp.controller('myController', function($scope, $timeout) {
  $scope.parentObject = {
    childObject: {
      id: 1
    }
  };
  $scope.changeChild = function changeChild() {
    var newChild = {
      id: $scope.parentObject.childObject.id + 1
    };
    $scope.parentObject.childObject = newChild;

    $timeout(function() {
      $scope.$broadcast('childChanged', newChild);
    }, 0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="testApp">
  <div data-ng-controller="myController">
    <div my-directive child="parentObject.childObject"></div>
    <button data-ng-click="changeChild()">Change Child {{parentObject.childObject}}</button>
  </div>
</div>