$emit or $broadcast an event from a controller to a directive AngularJS

Question

I want to be able to notify a directive when an event happens to change what the directive displays. I know that directives only run once, so I am wondering how I would go about doing this. I am also not sure if I should use $emit or $broadcast, is a directive a child of the controller?

For example, in my controller I have:

$rootScope.$emit('PHOTO_UPLOADED', photo);

And in my directive:

.directive('photo', [function () {
  return {
    restrict: 'EA',
    scope: {user: '='},
    replace: true,
    template: '<div id="{{user.id}}"></div>',
    link: function ($scope, element, attrs) {
      var thumbnail = ($scope.user && $scope.user.image) 
        ? $scope.user.image
        : '/default.png';

      element.css('background-image', 'url(' + thumbnail + ')');

      $rootScope.$on('PHOTO_UPLOADED', function(event, data) {
         thumbnail = data;
      });
    }
  };
}])

I tried to do this but nothing happened, the thumbnail was not updated because the directive already ran.

sma · Accepted Answer · 2014-09-16 20:49:45Z

26

Use $broadcast. That will broadcast events to child scopes. Here is an example of using broadcast to send data to a directive from a parent controller:

http://jsfiddle.net/smaye81/q2hbnL5b/6/

edited Sep 16, 2014 at 20:49

answered Sep 16, 2014 at 20:44

sma

9,5978 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

raga · Accepted Answer · 2016-08-11 20:00:39Z

7

In your controller do:

$rootScope.$broadcast('PHOTO_UPLOADED', photo);

and in your directive, catch the broadcast event via

  $rootScope.$on('PHOTO_UPLOADED', function(event, data) {
         thumbnail = data;
      });

answered Aug 11, 2016 at 20:00

raga

95710 silver badges14 bronze badges

Comments

Mike Driver · Accepted Answer · 2014-09-16 20:45:55Z

4

You need to make sure to pass $rootScope to your directive so it can be injected:

.directive('photo', ['$rootScope', function($rootScope) {
// snip
}]);

Modify you code's first line to the above and it should work fine.

answered Sep 16, 2014 at 20:45

Mike Driver

8,5113 gold badges38 silver badges37 bronze badges

Collectives™ on Stack Overflow

$emit or $broadcast an event from a controller to a directive AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related