$ emit или $передается событие от контроллера к директиве AngularJS

Я хочу, чтобы иметь возможность уведомлять директиву, когда событие происходит, чтобы изменить то, что отображает директива. Я знаю, что директивы запускаются только один раз, поэтому мне интересно, как я это сделаю. Я также не уверен, следует ли использовать $emit или $broadcast, является ли директором дочерний элемент контроллера?

Например, в моем контроллере у меня есть:

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

И в моей директиве:

.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;
      });
    }
  };
}])

Я попытался сделать это, но ничего не произошло, миниатюра не была обновлена, так как директива уже выполнялась.

Ответ 1

Используйте $broadcast. Это будет передавать события дочерним областям. Ниже приведен пример использования широковещательной передачи для передачи данных в директиву родительского контроллера:

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

Ответ 2

В вашем контроллере выполните:

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

и в вашей директиве поймайте событие трансляции через

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

Ответ 3

Вам нужно обязательно передать $rootScope в свою директиву, чтобы его можно было ввести:

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

Измените первую строку кода выше, и она должна работать нормально.