监听 $scope 上的多个事件

Question

我有一个指令，它使用$scope.$on 将一些函数绑定到本地范围。

是否可以一次调用将同一个函数绑定到多个事件？

理想情况下，我可以这样做：

app.directive('multipleSadness', function() {
    return {
        restrict: 'C',
        link: function(scope, elem, attrs) {
            scope.$on('event:auth-loginRequired event:auth-loginSuccessful', function() {
                console.log('The Ferrari is to a Mini what AngularJS is to ... other JavaScript frameworks');
            });
        }
    };
});

但这不起作用。将逗号分隔的事件名称字符串替换为 ['event:auth-loginRequired', 'event:auth-loginConfirmed'] 的相同示例也不起作用。

这是什么工作：

app.directive('multipleSadness', function() {
    return {
        restrict: 'C',
        link: function(scope, elem, attrs) {

            scope.$on('event:auth-loginRequired', function() {
                console.log('The Ferrari is to a Mini what AngularJS is to ... other JavaScript frameworks');
            });
            scope.$on('event:auth-loginConfirmed', function() {
                console.log('The Ferrari is to a Mini what AngularJS is to ... other JavaScript frameworks');
            });
        }
    };
});

但这并不理想。

是否可以一次性将多个事件绑定到同一个函数？

Answer 1

其他答案 (Anders Ekdahl) 100% 正确...选择其中一个...但是...

除此之外，你总是可以自己动手：

// a hack to extend the $rootScope 
app.run(function($rootScope) {
   $rootScope.$onMany = function(events, fn) {
      for(var i = 0; i < events.length; i++) {
         this.$on(events[i], fn);
      }
   }
});

app.directive('multipleSadness', function() {
    return {
        restrict: 'C',
        link: function(scope, elem, attrs) {
            scope.$onMany(['event:auth-loginRequired', 'event:auth-loginSuccessful'], function() {
                console.log('The Ferrari is to a Mini what AngularJS is to ... other JavaScript frameworks');
            });
        }
    };
});

我想如果你真的想做.split(',') 你可以，但这是一个实现细节。

Answer 2

AngularJS 不支持多事件绑定，但你可以这样做：

var handler = function () { ... }
angular.forEach("event:auth-loginRequired event:auth-loginConfirmed".split(" "), function (event) {
    scope.$on(event, handler);
});

Answer 3

是的。像这样：

app.directive('multipleSadness', function() {
    return {
        restrict: 'C',
        link: function(scope, elem, attrs) {

            function sameFunction(eventId) {
                console.log('Event: ' + eventId + '. The Ferrari is to a Mini what AngularJS is to ... other JavaScript frameworks.');
            }

            scope.$on('event:auth-loginRequired', function() {sameFunction('auth-loginRequired');});
            scope.$on('event:auth-loginConfirmed', function () {sameFunction('auth-loginConfirmed');});
        }
    };
});

但仅仅因为你可以，并不意味着你应该:)。如果事件继续传播到另一个侦听器并且在那里以不同的方式处理它们，那么也许有这样做的理由。如果这将是唯一的侦听器，那么您应该只发出（或广播）相同的事件。

Answer 4

我不认为这是可能的，因为事件可能会向回调发送数据，如果您监听多个事件，您将不知道哪些数据来自哪个事件。

我会做这样的事情：

function listener() {
    console.log('event fired');
}
scope.$on('event:auth-loginRequired', listener);
scope.$on('event:auth-loginConfirmed', listener);

Answer 5

与 $rootScope.$onMany （来自@ben-lesh 的解决方案）一样，可以扩展 $on 方法：

var $onOrigin = $rootScope.$on;

$rootScope.$on = function(names, listener) {
  var self = this;

  if (!angular.isArray(names)) {
    names = [names];
  }

  names.forEach(function(name) {
    $onOrigin.call(self, name, listener);
  });

};

取自here。