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
 }


}

另一个选项是，如果要检查模型的更改（从其他父作用域进行，假设对作用域变量进行单向绑定），则使用每个触发的钩子$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等事件处理指令。这完全取决于您要捕获的事件的类型。对于Ex：

在组件tmeplate内，在html下方添加。

点击这里

在组件类中定义函数。

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

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

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

4 个答案: