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

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

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

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

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

Детская директива

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>

Скрипка.


person net.uk.sweet    schedule 02.10.2015    source источник


Ответы (1)


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

scope.$watch('parentCtrl.someProperty', function () {
  controller.someProperty = parentController.someProperty 
    ? 'Hello world!' : 'Goodbye cruel world';
});
person Matthew Clise    schedule 02.10.2015
comment
Спасибо друг. Просто не мог этого увидеть! - person net.uk.sweet; 04.10.2015