Angularjs Liaison de données entre le contrôleur, la directive et le service

Question

J'essaie de mettre à jour le contenu d'une directive avec les données provenant d'un service. Il fonctionne comme ceci:

1. service (service toile html5) -> appelle une méthode dans le contrôleur sur une action
2. mises à jour du contrôleur $ scope.directiveData dans la méthode appelée par le service
3. directive (portée: true) devrait mettre à jour son contenu en fonction des nouvelles données

Le problème est que la directive ne met pas à jour son contenu. Toutefois, lorsque j'ajoute une mise à jour périodique à directiveData dans le contrôleur:

$interval(function() {$scope.directiveData.abc;}, 100); 

La directive met à jour son contenu!

Y at-il une explication à ce problème? Comment puis-je me débarrasser de cette mise à jour périodique?

J'ai simulé le problème jsFiddle: https://jsfiddle.net/eyNYw/857/

Answer 1

scope: true fait champ directive isolé (Angular directive. Isolating the Scope of a Directive). Cette directive ne voit donc pas la variable de contrôleur $ scope.directiveData.

Vous pouvez ajouter une variable isolé comme celui-ci

scope: {directiveData: '='} 

'=' - signifie que deux voies de liaison

Et puis passer scope.directiveData $ par la directive attribue

<your-directive directive-data="directiveData"></your-directive> 

Lorsque vous mettez à jour $ scope.directiveData angular mettra à jour celui-ci pour d irectif.