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作为依赖项。

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
})

Demo

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

3 个答案: