$ emit或$廣播從控制器到指令AngularJS的事件

Question

我希望能夠在事件發生更改指令顯示的內容時通知指令。 我知道指令只運行一次，所以我想知道如何做到這一點。 我也不確定我是否應該使用$ 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;
      });
    }
  };
}])

我試圖這樣做但沒有發生任何事情，縮略圖沒有更新，因為該指令已經運行。

Answer 1

使用$broadcast 。 這將向子范圍廣播事件。 以下是使用廣播從父控制器向指令發送數據的示例：

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

Answer 2

在您的控制器中執行：

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

並在您的指令中，通過獲取廣播事件

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

Answer 3

您需要確保將$rootScope傳遞給您的指令，以便可以注入：

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

將代碼的第一行修改為上面的內容，它應該可以正常工作。