模型更改后，事件未绑定到指令-AngularJS

Question

In my angularjs app, I have an element directive on which I bind an event listener that listens to a controller broadcast event.

app.directive('listItem', function(){
  return {
    link: function(scope, element){
        scope.$on('controllerEvent', function(e,attr) {
            console.log('event fired!')
        });
    },
    templateUrl:'views/fragments/list.html'
  }
}]);

This directive is rendered multiple times in my view using the ng-repeat directive with an array.

Whenever I load the view and the event is fired, all listeners are called accordingly, but when I add a new item in the array, which causes another directive to be rendered, its listener is never called. Is there a way to force it to bind?

Answer 1

You have to shoot for event listener

$scope.$emit('controllerEvent', {});

Whenever it is changed

Answer 2

After a lot of fiddling, I found a way around it.

Since I was binding it to the local scope of the directive, it was possibly losing reference to it when adding more data. To fix it, I simply changed the binding to the $rootScope (had to inject it in the directive);

app.directive('listItem', ['$rootScope', function($rootScope){
    return {
        link: function(scope, element){
            $rootScope.$on('controllerEvent', function(e,attr) {
                console.log('event fired!')
            });
        },
        templateUrl:'views/fragments/list.html'
    }
}]);