如何监听 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()。Angular 1.5 引入了一些新的钩子和语法，但在组件内部您始终可以注入$rootScope和$scope，并像在 Angular < 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
 }
}