Javascript 如何在AngularJs服务中创建自定义事件

我正在做一个AngularJs项目。我有一个服务，可以设置和删除一些按钮上的事件。这个服务被另一个我不想直接与按钮交互的服务使用。但是，我希望通过第一个服务过滤按钮单击事件，并在第二个服务中处理。因为我不希望第二个服务知道按钮，所以我想我需要在第一个服务中创建一个自定义事件。如何创建自定义事件并在单击按钮时触发它

---

提前感谢。

您可以在元素上创建并发出具有以下内容的事件

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

然后在控制器中，您可以使用

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

---

如果要在服务/指令之间发送事件，请使用

广播

：

$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。创建按钮指令，该指令使用用户ClickingHelper作为依赖项。

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

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

3。使用代理注册您的无关服务。

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

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

结果是一个孤立的事件分布范围，但指令和服务都不知道彼此。单元测试也更容易

---

我正在为全局可访问的“加载”模式使用类似的解决方案，这样我就可以抽象出控制器/服务所说的“用户现在不应该单击或做任何事情”的方式。

我希望两个“服务”能够通信，而不是视图和控制器。然而，读了你的答案后，我有了一种顿悟。我可以在服务之间建立双向通信。当服务1捕获按钮点击事件时，它可以调用服务2中所需的方法，该方法将执行我所需的处理。这似乎是一个实现我所需要的简单方法。非常感谢你！划破它！我将把这两项服务紧密地结合在一起！我将使用另一个用户指示的$rootScope.$on（）和$rootScope.$broadcast（）方法。再次感谢！（如果你想知道，是的，我是个新手）！它实际上做的完全一样，我的演示有广播和发射功能，我使用发射进行演示，我的方法是直接从DOM发射，而不是在控制器中添加更多逻辑。这个答案需要更多的投票！对于我的需要，

$rootScope.$broadcast（）

更合适，但我可以看到在某些情况下，使用

ng click=“$emit（'customEvent'）”

会更好。嘿，非常感谢。但是，服务本身是否有触发事件的机制，以便第二个服务必须引用第一个服务才能处理该事件？例如：在service2中有一行代码：service1.eventfired=do_something（）。是的，这是我答案的最后一部分。在第二个服务中，您需要添加代码，只需将

$scope.$on

更改为

$rootScope.$on

这比我考虑的要干净得多。万岁！万岁！万岁！万岁！万岁！也许观察者模式为问题+1带来了其他解决方案。这个答案在实现侦听器/处理程序时提供了一般的良好实践，而Chancho的答案更适合OP的用例。我喜欢这种方法，因为我们可以钩住来自可信来源的通知，或者我们知道它应该来自哪里。若我们使用$rootScope.$broadcast，那个么在复杂的应用程序中，很可能有人会在同一事件上重叠来广播他们的数据。