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

Question

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

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

Это будет иметь 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. Это плохая идея для начала? Должен ли я использовать сервис или что-то, а не передавать ссылки на функции?

Спасибо!

Answer 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>

шлепнуть

---

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

До:

scope: {
  OnToggle: '&'
}

После:

scope: {
  onToggle: '='
}

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

шлепнуть