36

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

提前致谢。

4

3 回答 3

85

如果您想在服务/指令之间发送事件，请使用broadcast：

$rootScope.$broadcast('buttonPressedEvent');

并像这样接收它：

$rootScope.$on('buttonPressedEvent', function () {
             //do stuff
        })
于 2014-06-09T22:06:36.723 回答
35

任何基于全局范围的集成都会损害命名空间，并可能在大中型应用程序中产生可怕的副作用。我推荐使用代理服务的更复杂但绝对更清洁的解决方案。

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");
    });
}]);

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

我正在对全局可访问的“加载”模式使用类似的解决方案，因此我可以抽象控制器/服务所说的“用户现在不应该点击或任何东西”的方式。

于 2015-04-09T11:40:54.673 回答
8

您可以在元素上使用以下内容创建和发出事件

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

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

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

演示

于 2014-06-09T21:58:19.960 回答