AngularJSコンポーネントでイベントを聴くには？

Question

AngularJSでは、ブロードキャストすることができ、そしてイベントをリッスン：

$rootScope.$emit('myEvent',$scope.data); 

$rootScope.$on('myEvent', function(event, data) {} 

は、コンポーネント内のイベントをリッスンする方法はありますか？

私が達成したいのは、フォーム内で繰り返される一連のコンポーネントに対して何らかのアクションを実行することです。 Ng-repeatはもちろんいくつかのモデルを反復します。モデルの一部のデータはコンポーネントにバインドされています。関数をコンポーネントにバインドするのは簡単なので、コンポーネントはロジックを実行することができますが、逆方向はあまり簡単ではないようです。

<div ng-repeat="someObject in mainModel.listOfObjects"> 
    <someControl ng-model="someObject.foo"></someControl> 
    <custom-component ng-model="someObject.bar"></custom-component> 
</div> 
<someButton ng-click="executeActionOnAllCustomComponents()"> 

Answer 1

私はあなたの最善の策は、$emit()と$broadcast()で発光標準イベントを使用し続けることだと思います。 angualr 1.5より、いくつかの新しいフックとsintaxが導入されましたが、コンポーネント内には常に$rootScopeと$scopeを挿入し、以前のようにすべてのイベントを処理することができます（< 1.5）。

テンプレート：

<div ng-controller="parentController"> 
<div ng-repeat="someObject in mainModel.listOfObjects"> 
    <someControl ng-model="someObject.foo"></someControl> 
    <custom-component ng-model="someObject.bar"></custom-component> 
</div> 
</div> 

親コントローラ：

angular.controller('parentController', ['$scope', function($scope){ 
.. 
if(somethingHappend) 
    $scope.$broadcast('event.sample', {}); //down in the scope chain 
}) 

コンポーネント：

angular.component('customComponent', { 
bindings: { 
    ngModel: '<' //one-way binding 
}, 
controller: MyCtrl 
} 
MyCtrl.$inject = ['$scope', '$rootScope']; 

function MyCtrl('$scope', $rootScope){ 
.. 
$scope.$on('event.sample', function(evt, data){ 
    //do your logic 
} 


} 

別OPTあなたがモデルの変更をチェックしたい場合（スコープ変数の一方向バインディングを想定して親スコープから作成）、古いものではなく、ダイジェストサイクルごとにトリガーされるフック$doCheckを使用します古い値を保存して新しい値と比較する必要があります。

var self = this; 
var oldModel = angular.copy(self.ngModel); 
self.$doCheck = function(){ 
if(self.model !== oldModel){ 
    //do something 
} 
} 

Answer 2

あなたは以下のコードを参照してください。

を関数のパラメータとして$イベントを渡すことができます。

<span ng-click=get($event)> click !!</span> 

$scope.get=function(ev) 
{ 
alert(ev); 
}; 

結果がなる[オブジェクトのMouseEvent]