javascript - How to listen for an event in AngularJS component? - Stack Overflow

admin管理员组

文章数量:1289879

In AngularJS we can broadcast, and listen for events:

$rootScope.$emit('myEvent',$scope.data);

$rootScope.$on('myEvent', function(event, data) {}

Is there any way to listen for events inside a ponent?

What I want to achieve is to execute some action on set of ponents which are repeated inside a form. Ng-repeat iterates over some model of course. Some data from the model is bound to the ponent. It's easy to bind function to ponent, so ponent can execute some logic, but the opposite direction doesn't seem to be so easy.

<div ng-repeat="someObject in mainModel.listOfObjects">
   <someControl ng-model="someObject.foo"></someControl>
   <custom-ponent ng-model="someObject.bar"></custom-ponent>
</div>
<someButton ng-click="executeActionOnAllCustomComponents()">

In AngularJS we can broadcast, and listen for events:

$rootScope.$emit('myEvent',$scope.data);

$rootScope.$on('myEvent', function(event, data) {}

Is there any way to listen for events inside a ponent?

What I want to achieve is to execute some action on set of ponents which are repeated inside a form. Ng-repeat iterates over some model of course. Some data from the model is bound to the ponent. It's easy to bind function to ponent, so ponent can execute some logic, but the opposite direction doesn't seem to be so easy.

<div ng-repeat="someObject in mainModel.listOfObjects">
   <someControl ng-model="someObject.foo"></someControl>
   <custom-ponent ng-model="someObject.bar"></custom-ponent>
</div>
<someButton ng-click="executeActionOnAllCustomComponents()">

• javascript
• angularjs
• angular-ponents

Share Improve this question Follow asked Apr 18, 2017 at 10:27 Arkadiusz KałkusArkadiusz Kałkus 18.4k2020 gold badges7777 silver badges112112 bronze badges 1

• maybe this would be helpful stackoverflow./questions/19623412/… – boroboris Commented Apr 18, 2017 at 10:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I think your best bet is keep using the standard event emitting with $emit() and $broadcast(). angular 1.5 introduced some new hooks and sintax but inside a ponent you can always inject $rootScope and $scope, and handling any event as you were used to in angular < 1.5.

Template:

<div ng-controller="parentController">
 <div ng-repeat="someObject in mainModel.listOfObjects">
   <someControl ng-model="someObject.foo"></someControl>
   <custom-ponent ng-model="someObject.bar"></custom-ponent>
 </div>
</div>

Parent controller:

angular.controller('parentController', ['$scope', function($scope){
 ..
 if(somethingHappend)
   $scope.$broadcast('event.sample', {}); //down in the scope chain
})

Component:

angular.ponent('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
 }


}

Another option, if you want to check for changes on your model (made from the othe parent scope, supposing a one-way binding on your scope variables), is to use the hook $doCheck which is triggered each digest cycle, as opposed to the old watch mechanism you must save your old value and pare it to the new one.

var self = this;
var oldModel = angular.copy(self.ngModel);
self.$doCheck = function(){
 if(self.model !== oldModel){
   //do something
 }
}

You can pass $event as parameter to function

please see the below code.

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

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

Result will be [object MouseEvent]

You can use RxJS in the Angular 2+ style:

'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-ponent.html'
    }

So the trick is to use fromEventPattern to create Observable from AngularJS event listener:

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

To listen to an event in AngularJs, use event handling directives like ng-click , ng-change etc. It will pletely depend on the type of event you want to capture. For Ex :

Inside your ponent tmeplate add below html.

Click here

Define the function inside the ponent class.

For more details on AngularJS - event handling check the link :

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

本文标签： javascriptHow to listen for an event in AngularJS componentStack Overflow