$ emituje lub transmituje wydarzenie od kontrolera do dyrektywy AngularJS

Question

Chcę być w stanie powiadomić dyrektywę, gdy zdarzenie zmieni jej wygląd. Wiem, że dyrektywy działają tylko raz, więc zastanawiam się, jak to zrobię. Nie jestem również pewien, czy powinienem używać emisji $ emit lub $, czy dyrektywa jest dzieckiem kontrolera?

Na przykład w moim kontroler mam:

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

I w moim dyrektywy:

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

Próbowałem to zrobić, ale nic się nie stało, miniaturka nie został zaktualizowany, ponieważ dyrektywa już działała.

Answer 1

Użyj $broadcast. To będzie transmitować zdarzenia do zakresów potomnych. Oto przykład z użyciem transmisji do wysyłania danych do dyrektywy z kontrolera nadrzędnego:

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

Answer 2

Musisz upewnić się przejść $rootScope do dyrektywy więc może być wstrzykiwany:

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

Zmodyfikuj pierwszy wiersz kodu do powyższego i powinien działać poprawnie.

Answer 3

W kontrolerze zrobić:

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

oraz w dyrektywie, złapać zdarzenie broadcast poprzez

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