У меня есть родительская и дочерняя директивы с контроллером, каждая из которых требуется в дочерней директиве. Я хочу следить за изменениями свойства в контроллере родительской директивы в функции ссылки дочерней директивы. Однако функция наблюдения запускается при инициализации, но не впоследствии, когда свойство изменяется с помощью кнопки в области действия родительской директивы или функцией ссылки родительской директивы.
Пожалуйста, может кто-нибудь объяснить, почему это так и как я должен это решить?
Родительская директива
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>