Изолированная сфера не обновляется

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 вызывается в myController. Эта функция заменит $ scope.parentObject.childObject другим ребенком и будет транслировать событие.
• Слушатель этого события находится в контроллере директивы. В прослушивателе мы проверяем, является ли дочерний объект в изолированной области ($ scope.child) тем же самым, что и тот, который был отправлен в событии (то есть, объект scope.parentObject.childObject родителя). Мы видим, что они не совпадают, то есть ребенок, которого мы получили в , выделенная область еще не обновлена.

Обратите внимание, что если я использую $ scope. $ Apply() перед трансляцией, тогда будет обновляться $ scope.child в контроллере директивы, однако это вызовет следующее исключение: «$ apply уже применяется прогресс".

Может кто-то, пожалуйста, помогите мне понять, что здесь происходит? Почему приложение $ scope. $ Применило помощь, даже если оно только выкидывало экскремент? Как это можно решить, не обращаясь к $ scope. $ Apply? Я хотел бы знать, есть ли способ гарантировать, что связанное свойство в изолированной области будет обновляться после его изменения в области родителя без необходимости передавать его в событии.

Спасибо

Answer 1

Вы можете использовать $ таймаут для вызова следующего переваривать цикла после обновления child.id

Пожалуйста, смотрите демо ниже

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>