$ scopeで複数のイベントをリッスンします

Question

ローカルスコープに一部の機能をバインドするディレクティブが$scope.$onです。

同じ関数を1回の呼び出しで複数のイベントにバインドすることはできますか？

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

はい。このように：

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(',')を実行したければ、それは実装の詳細です。また、$ rootScopeと同様

Answer 5

$ 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から取りました。