$ emette o $ trasmette un evento da un controller a una direttiva AngularJS

Question

Desidero essere in grado di notificare una direttiva quando si verifica un evento per modificare ciò che viene visualizzato dalla direttiva. So che le direttive funzionano una sola volta, quindi mi chiedo come farei per farlo. Non sono nemmeno sicuro se dovrei usare $ emit o $ broadcast, è una direttiva un figlio del controller?

Ad esempio, nel mio controller ho:

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

E nella mia direttiva:

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

ho provato a fare questo, ma non è successo niente, la miniatura non è stato aggiornato perché il la direttiva già funzionava.

Answer 1

Utilizzare $broadcast. Questo trasmetterà eventi agli ambiti figlio. Ecco un esempio di utilizzo di trasmissione per inviare i dati ad una direttiva da un controller di genitore:

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

Answer 2

È necessario assicurarsi di passare $rootScope alla direttiva in modo che possa essere iniettato:

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

Modifica la prima riga del codice come sopra e dovrebbe funzionare correttamente.

Answer 3

nel controller fare:

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

e nel tuo direttiva, catturare l'evento di trasmissione via

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