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

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

Спасибо!

1 27
javascript angularjs single-page-application

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 в dash обозначение ).

До: 

scope: {
  OnToggle: '&'
}

После: 

scope: {
  onToggle: '='
}

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

Plunk

47