связать директиву директивы parent с дочерней директивой в угловом

Question

Я пытаюсь создать простую директиву show/hide на основе элементов, переведенных в div. У меня есть родительская и дочерняя директива. При нажатии на родительскую директиву директива child должна переключать отображение/скрытие своего div. Функция переключения находится в родительском контроллере и переключает переменную между true и false, чтобы дочерняя директива отображала/скрывала.

Проблема: функция переключения в родительской директиве работает правильно, однако дочерняя директива не знает изменения переменной переключения при щелчке родителя. Я передаю ctrl функции ссылки в дочерней директиве, используя require. Таким образом я могу получить доступ к родительским объектам контроллера для показа и скрытия. Переключающая переменная отображается дочерним элементом, но не отражает никаких изменений после начальной загрузки страницы. При нажатии ничего не отображается или не скрывается.

код:

angular.module('demo', []) 

.directive('demoParent', function() { 
    return { 
     restrict: 'E', 
     scope: {}, 
     transclude: true, 
     template: '<div ng-click="toggleTarget()" ng-transclude></div>', 
     controller: function($scope) { 
      $scope.toggleTarget = function() { 
       this.openTarget = !this.openTarget; 
      }; 
      this.openTarget = false; 
     } 
    }; 
}) 

.directive('demoChild', function() { 
    return { 
     require: '^demoParent', 
     restrict: 'E', 
     transclude: true, 
     link: function(scope, elem, attrs, ctrl) { 
      scope.ctrl = ctrl; 
     }, 
     template: '<div ng-show="ctrl.openTarget" ng-transclude></div>', 
    }; 
}); 

нужен ли ребенку, чтобы добавить Бодрствующий к родительскому Ctrl или это случай изолированных переменным, как только передается от родителей к ребенку?

Answer 1

Я сделал Fiddle с вашим рабочим сценарием, вы имели проблемы с this функциональности, а также, за исключением ^demoChild, который вы сказали, была опечаткой. После того, как внутри функции, то this указывал на объем, а не контроллер, как вы ожидали, поэтому этот раздел должен быть изменен:

controller: function($scope) { 
    this.openTarget = false; 
    var _ctrl = this; 
    $scope.toggleTarget = function() { 
     _ctrl.openTarget = !_ctrl.openTarget;    
    };    
} 

Answer 2

попробуйте следующее: var me = this; $ scope.toggleTarget = function() { me.openTarget =! Me.openTarget; };