如何监听 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()">

原文由 Arkadiusz Kałkus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您最好的选择是继续使用 $emit() 和 $broadcast() 发出的标准事件。 angular 1.5 引入了一些新的 hooks 和 sintax，但在组件中你总是可以注入 $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
 }
}

原文由 Karim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要在 AngularJs 中监听事件，请使用事件处理指令，例如 ng-click 、 ng-change 等。这完全取决于您要捕获的事件类型。例如：

在您的组件模板中添加以下 html。

点击这里

在组件类中定义函数。

有关 AngularJS 的更多详细信息 - 事件处理，请查看链接：

https://www.tutespace.com/2018/11/angular-js-event-handling.html

原文由 Shrinivas Kalangutkar 发布，翻译遵循 CC BY-SA 4.0 许可协议