Угловые часы на контроллере родительской директивы с требованием

Question

У меня есть родительская и дочерняя директива с контроллером, каждый из которых требуется в дочерней директиве. Я хочу следить за изменениями свойства на родительском директивном контроллере в функции ссылок дочерней директивы. Тем не менее, функция часов запускается при инициализации, но не позже, когда свойство изменяется кнопкой в ​​области родительской директивы или функцией ссылки родительской директивы.

Пожалуйста, может кто-нибудь объяснить, почему это так и как я должен его решить?

директива Родитель

myApp.directive('parentDirective', function ($timeout) { 
    return { 
     restrict: 'E', 
     scope: true, 
     controllerAs: 'parentCtrl', 
     controller: function() { 
      var vm = this; 
      vm.someProperty = true; 
      vm.toggle = function() { 
       vm.someProperty = !vm.someProperty; 
      } 
     }, 
     link: function (scope, element, attrs, controller) { 
      $timeout(function() { 
       controller.toggle(); 
      }, 1000); 
     } 
    } }); 

директива Child

myApp.directive('childDirective', function() { 
    return { 
     restrict: 'E', 
     scope: true, 
     require: ['childDirective', '^parentDirective'], 
     controllerAs: 'childCtrl', 
     controller: function() { 
      var vm = this; 
      vm.someProperty = ''; 
     }, 
     link: function (scope, element, attrs, controllers) { 

      var controller = controllers[0]; 
      var parentController = controllers[1]; 

      scope.$watch('parentController.someProperty', function() { 
       controller.someProperty = parentController.someProperty 
        ? 'Hello world!' : 'Goodbye cruel world'; 
      }); 
     } 
    } 
}); 

Посмотреть

<parent-directive> 
    <button ng-click="parentCtrl.toggle()">Toggle message</button> 
    <child-directive> 
     <p>{{childCtrl.someProperty}}</p> 
    </child-directive> 
</parent-directive> 

Fiddle.

Answer 1

В области, которую вы смотрите, родительский контроллер является «parentCtrl» вместо «parentController», поэтому вы фактически не смотрите свойство, которым вы хотите быть. Должно работать следующее:

scope.$watch('parentCtrl.someProperty', function() { 
    controller.someProperty = parentController.someProperty 
    ? 'Hello world!' : 'Goodbye cruel world'; 
});