如何监听 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
 }
}

Answer 2

您可以将 $event 作为参数传递给函数

请看下面的代码。

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

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

结果将是 [object MouseEvent]

Answer 3

您可以在 Angular 2+ 样式中使用 RxJS：

'use strict';

    import {from, fromEventPattern} from 'rxjs';
    import {map, tap, switchMap, distinctUntilChanged} from 'rxjs/operators';

    export default {
        bindings: {},
        controller: function (SomeService, $rootScope) {
            const self = this;

            self.$onInit = () => {
                fromEventPattern(
                    (handler) => $rootScope.$on('@some-event', handler)
                ).pipe(
                    distinctUntilChanged((x, y) => _.isEqual(x, y)),
                    switchMap(([e, data]) => from(SomeService.getSomething()))
                ).subscribe(
                    data => console.log(data),
                    error => console.log(error)
                );

            };
        },
        templateUrl: './some-component.html'
    }

所以诀窍是使用 fromEventPattern 从 AngularJS 事件侦听器创建 Observable：

fromEventPattern(
   (handler) => $rootScope.$on('@some-event', handler)
)

Answer 4

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

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

点击这里

在组件内部定义函数class。

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

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

如何监听 AngularJS 组件中的事件？

How to listen for an event in AngularJS component?

javascript

angularjs

angular-components