Javascript 如何在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()">

---

我认为您最好的选择是继续使用标准事件发射和

$emit（）

和

$broadcast（）

。 angualr 1.5引入了一些新的钩子和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
 }


}

组件：

<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
 }


}

---

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

请参阅下面的代码

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

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

点击！！
$scope.get=函数（ev）
{
警报（ev）；
};

---

结果将是[object MouseeEvent]

您可以在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'
    }

因此，诀窍是使用AngularJS事件监听器创建可观察的：

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

---

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

在组件tmeplate中，添加以下html

点击这里 在component类中定义函数

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

---

也许这会是一个很有帮助的回答，格雷齐·米勒·卡里姆！