Множественные элементы управления AngularJS с шаблоном и трансляцией от контроллера

Question

У меня есть элемент директивы с шаблоном. Шаблон директивы содержит кнопку с ng-click для вызова функции в контроллере. Когда кнопка нажата, контроллер передает событие, и директивы ищут трансляцию. Это отлично работает, однако, я получаю предупреждение для каждого элемента директивы, который используется в приложении. Я просто хочу, чтобы трансляция прослушивалась с помощью элемента директивы, используемого для нажатия кнопки.

Как я могу выделить адресные клики для каждого экземпляра? Я пробовал много директивных областей, но я не мог найти решение. И, это лучшее решение для использования для этой цели?

Я создал скрипку здесь: http://jsfiddle.net/mLnspea0/

var app = angular.module('testApp', []); 

app.controller('SaveCtrl', function ($scope) { 
    $scope.save = function() { 
     $scope.$broadcast('saved'); 
    }; 
}); 

app.directive('saveButton', function() { 
    return { 
     restrict: 'E', 
     template: '<div class="container"><button ng-click="save()">Save</button></div>', 
     link: function (scope, element, attr) { 
      scope.$on('saved', function() { 
       alert('saved'); 
      }); 
     } 
    } 
}); 

Спасибо за любую помощь.

Answer 1

Проблема в функции link по вашей директиве вызывается, как только вы ее вызываете. В вашей скрипке вы вызываете ее дважды. Это создает два прослушивателя событий для одного события, и когда вы транслируете событие, его подбирают оба слушателя, откуда вы получаете два предупреждения.

Если бы я был вами, я бы переместил слушателя из директивы и обратно в ваш контроллер. Я бы также ввел метод действия click в директиву, а не принуждал директиву опираться на родительский (то есть контроллер) $ scope. Разделение проблем и все такое.

http://jsfiddle.net/zejjxd5u/

var app = angular.module('testApp', []); 

app.controller('SaveCtrl', function ($scope) { 
    $scope.save = function() { 
     $scope.$broadcast('saved'); 
    }; 

    $scope.$on('saved', function() { 
     alert('test'); 
    }); 
}); 

app.directive('saveButton', function() { 
    return { 
     restrict: 'E', 
     template: '<div class="container"><button ng-click="save()">Save</button></div>', 
     scope: { 
      save: '=' 
     } 
    } 
}); 

Answer 2

Было бы немного более полезным, если вы привели пример о более широкой картине здесь. Я не думаю вы используете события/просматривая лучший способ. Вероятно, более целесообразно определить функцию сохранения в области директивы вместо области контроллера. И тогда у вас будет доступ к элементу, который был нажат.

Тогда вы могли бы излучать событие и реагировать на него в контроллере

Например:

app.directive('saveButton', function() { 
    return { 
     restrict: 'E', 
     template: '<div class="container"><button ng-click="save()">Save</button></div>', 
     link: function (scope, element, attr) { 
      scope.$on('saved', function() { 
       alert('saved'); 
      }); 

      scope.save = function() { 
       console.log(element, "clicked"); 
       scope.$emit('element-clicked', element); 
      } 
     } 
    } 
}); 

Answer 3

Я бы не использовать событие вообще. Почему бы не использовать дочернюю область в директиве со своей версией функции сохранения и вызвать ее напрямую? Затем директива может вызывать «родительский» scope.save() всякий раз, когда захочет, и запускать любую логику, которая ему нужна до или после.

Смотрите здесь: http://jsfiddle.net/jxzn6o49/1/

app.directive('saveButton', function() { 
    return { 
     restrict: 'E', 
     template: '<div class="container"><button ng-click="directiveSave()">Save</button></div>', 
     scope: true, 
     link: function (scope, element, attr) { 
      scope.directiveSave = function() { 
       scope.save(); 
       alert('after-save logic in directive'); 
      } 
     } 
    } 
});