監聽$範圍內的多個事件

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

是。像這樣：

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 2

我不認爲這是可能的，因爲事件可能會將數據發送到回調函數，並且如果您聆聽多個事件，則不知道哪個數據來自哪個事件。

我會做這樣的事情：

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

Answer 3

AngularJS不支持多個事件綁定，但你可以做這樣的事情：

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

Answer 4

其他的答案（安德斯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 5

還與$ rootScope $ onMany（來自@奔故障溶液）喜歡它可能在方法擴展$：

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了。