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

Я разрабатываю директиву, которая отображает и скрывает ее содержимое на основе выбранного в нем шаблона click (ng-click). В некоторых представлениях, где используется директива, я хотел бы знать, отображается ли в настоящее время директива или скрывает ее содержимое, чтобы я мог реагировать на изменения DOM. Директива имеет изолированную область действия, и я пытаюсь уведомить родительскую область, когда директива была "переключена". Я пытаюсь выполнить это, передав функцию обратного вызова в директиву, где она используется, которая может быть вызвана при изменении состояния директивы, или скрывает или показывает

Я не уверен, как правильно реализовать это, поскольку состояние директивы (скрытое или показанное) хранится в изолированной области действия директивы и определяется после ng-click. Поэтому мне нужно вызвать функцию родительской области видимости из директивы, а не из представления.

Это сделает WAAY более понятным с примером. Здесь показано, что я хотел бы сделать:

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

var app = angular.module('main-module',[])

app.controller('MainController', function($scope){
  $scope.myValue = 'test value';
  $scope.parentToggle = function(value){
    $scope.myValue = value;
  };
});

app.directive('toggle', function(){
    return {
            restrict: 'A',
            template: '<a ng-click="toggle();">Click Me</a>',
            replace: true,
            scope: {
                OnToggle: '&'
            },
            link: function($scope, elem, attrs, controller) {
                $scope.toggleValue = false;
                $scope.toggle = function () {
                    $scope.toggleValue = !$scope.toggleValue;
                    $scope.OnToggle($scope.toggleValue)
                };
            }
        };
});

Я относительно новичок в Angular. С этой плохой идеей? Должен ли я использовать сервис или что-то, а не передавать функции refs?

Спасибо!

Ответы

Ответ 1

Обновление

Вы также можете использовать & для привязки функции корневой области (на самом деле это цель &).

Для этого нужно немного изменить директиву:

app.directive('toggle', function(){
  return {
    restrict: 'A',
    template: '<a ng-click="f()">Click Me</a>',
    replace: true,
    scope: {
      toggle: '&'
    },
    controller: function($scope) {
      $scope.toggleValue = false;
      $scope.f = function() {
        $scope.toggleValue = !$scope.toggleValue;
        $scope.toggle({message: $scope.toggleValue});
      };
    }
  };
});

Вы можете использовать следующее:

<div toggle="parentToggle(message)"></div>

Plunk

Вы можете связать функцию с помощью =. Кроме того, убедитесь, что имя свойства в вашей области и теге соответствуют (AngularJS переводит CamelCase в тире).

До:

scope: {
  OnToggle: '&'
}

После:

scope: {
  onToggle: '='
}

Кроме того, не используйте on-toggle="parentToggle({value: toggleValue})" в своем основном шаблоне. Вы не хотите вызывать функцию, а просто передаете указатель функции в директиву.

Plunk