21

我有一个指令将一些函数绑定到本地范围$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');
            });
        }
    };
});

但这并不理想。

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

4

5 回答 5

29

其他答案（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(',')你可以，但这是一个实现细节。

于 2013-02-12T16:15:15.173 回答
14

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

var handler = function () { ... }
angular.forEach("event:auth-loginRequired event:auth-loginConfirmed".split(" "), function (event) {
    scope.$on(event, handler);
});
于 2013-02-12T14:16:13.550 回答
13

是的。像这样：

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

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

于 2013-02-12T14:17:14.193 回答
8

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

我会做这样的事情：

function listener() {
    console.log('event fired');
}
scope.$on('event:auth-loginRequired', listener);
scope.$on('event:auth-loginConfirmed', listener);
于 2013-02-12T13:47:01.580 回答
1

也与 $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);
  });

};

取自这里。

于 2015-06-07T19:51:46.123 回答