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

Question

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

提前致谢.

Answer 1

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

$rootScope.$broadcast('buttonPressedEvent');

并像这样收到它:

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

Answer 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作为依赖项的button指令.

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

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

我正在使用类似的全局可访问"加载"模式的解决方案,所以我可以抽象控制器/服务说"用户不应该点击或现在任何事情"的方式.

Answer 3

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

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

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

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

演示