在$ 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']也不是wrk.

这是什么工作:

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