如何傾聽AngularJS組件中的事件？

在AngularJS我們可以播出，並監聽事件：如何傾聽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()">

來源

2017-04-18 Landeeyo

也許這將是有益的http://stackoverflow.com/questions/19623412/reacting-on-angular-events-in-a-directive-without- injecting-rootscope – boroboris

我認爲最好的辦法是繼續使用標準的事件與$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 
} 


}

另一種選擇如果你想檢查你的模型的變化（由其他父範圍做出，假設你的範圍變量是單向綁定），就是使用鉤子$doCheck，它觸發每個摘要週期，而不是舊的手錶機制，你必須保存你的舊值，並將其與新的值進行比較。

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

來源

2017-04-18 10:50:10 Karim

很好的回答，grazie mille Karim！ – Landeeyo

不客氣，grazie a te :) – Karim

您可以通過$事件作爲參數的功能

請參見下面的代碼。

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

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

結果將是[對象的MouseEvent]

來源

2017-04-18 12:12:16 Wintergreen

如何傾聽AngularJS組件中的事件？

回答

相關問題