Как создать настраиваемое событие в службе AngularJs

Я работаю над проектом AngularJs. У меня есть служба, которая устанавливает и удаляет события на некоторых кнопках. Эта услуга используется другой службой, с которой я не хочу напрямую взаимодействовать с кнопками. Однако я хотел бы, чтобы событие нажатия кнопки было отфильтровано через первую службу и обработано во втором. Поскольку я не хочу, чтобы вторая служба знала о кнопках, я полагаю, что мне нужно будет создать пользовательское событие в первой службе. Как создать пользовательское событие и запустить его при нажатии кнопки?

Спасибо заранее.

Ответ 1

Если вы хотите отправить событие между службами/директивами, используйте broadcast:

$rootScope.$broadcast('buttonPressedEvent');

И получится так:

$rootScope.$on('buttonPressedEvent', function () {
             //do stuff
        })

Ответ 2

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

1. Создание прокси-сервиса

angular.module('app').service('userClickingHelper', [
  function() {
    var listeners = [];
    return {
      click: function(args) {
        listeners.forEach(function(cb) {
          cb(args);
        });
      },
      register: function(callback) {
        listeners.push(callback);
      }
    };
  }
]);

2. Создать директиву кнопки, которая использует userClickingHelper в качестве зависимости.

angular.module('app').directive('onDistributedClick', ['userClickingHelper', function (userClickingHelper) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.on('click', userClickingHelper.click);
        }
    };
}]);

3. Зарегистрируйте свою несвязанную службу с помощью прокси.

angular.module('app').service('myUnrelatedService', [function (userClickingHelper) {
    userClickingHelper.register(function(){
        console.log("The button is clicked somewhere");
    });
}]);

Результат - изолированная область распределения событий, но ни директива, ни служба не знают друг о друге. Кроме того, легче провести тестирование на единицу.

Я использую аналогичное решение для доступного по всему миру модальности "Загрузка", поэтому я могу абстрагироваться от того, как контроллер/служба говорит "пользователь не должен щелкнуть или что-нибудь прямо сейчас".

Ответ 3

Вы можете создать и испустить событие со следующим элементом

ng-click="$emit('customEvent')"

Затем в вашем контроллере вы можете использовать

$rootScope.$on('customEvent', function(){
    // do something
})

Демо