web-dev-qa-db-ja.com

$ emitまたは$ broadcastイベントをコントローラーからディレクティブAngularJSに

ディレクティブの表示内容を変更するイベントが発生したときに、ディレクティブに通知できるようにしたい。ディレクティブが実行されるのは1回だけであることを知っているので、どうすればこれを実行できるのか疑問に思っています。 $ 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;
      });
    }
  };
}])

これを実行しようとしましたが、何も起こりませんでした。ディレクティブはすでに実行されているため、サムネイルは更新されませんでした。

javascriptangularjsangularjs-directiveangularjs-scope
21
user1876246

使用する $broadcast。これにより、イベントが子スコープにブロードキャストされます。ブロードキャストを使用して親コントローラーからディレクティブにデータを送信する例を次に示します。

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

25
sma

あなたのコントローラーで：

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

ディレクティブで、ブロードキャストイベントを

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

ディレクティブに$rootScopeを渡して、注入できるようにする必要があります。

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

コードの最初の行を上記に変更すると、問題なく機能するはずです。

4
Mike Driver