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

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

$rootScope.$broadcast('buttonPressedEvent');

И получить это так:

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

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

<сильный>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");
    });
}]);

В результате получается изолированная область распространения событий, но ни директива, ни служба не знают друг о друге. Также проще проводить модульное тестирование.

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

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

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

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

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

Демо