Utiliser le même contrôleur sur différents éléments pour faire référence au même object

Je pensais que si je frappais ng-controller="GeneralInfoCtrl" sur plusieurs éléments de mon DOM, ils partageraient le même $scope (ou la moindre liaison bidirectionnelle ne fonctionnerait pas).

La raison pour laquelle je veux le faire est que j’ai différentes vues en lecture seule avec des boîtes de dialog modales associées dans des parties très différentes du code HTML et qu’elles ne partagent pas un ancêtre commun (hormis et ).

Y a-t-il un moyen de faire en sorte que les deux contrôleurs se réfèrent au même object / établissent un lien entre les données?


Voici un code pour ceux qui insistent pour voir le balisage, écrit en Jade :

  .client-box(ng-controller="GeneralInfoCtrl") .box-header .box-title h5 General Information .box-buttons button.btn.btn-small(data-target='#editGeneralInfo', data-toggle='modal', data-backdrop='static')  Edit .box-body table.table.table-tight.table-key-value tr th Name td {{client.fullName()}} tr th Also Known As td {{client.aka}} tr th Birth Date td {{client.birthDate|date:'mediumDate'}} ... #editGeneralInfo.modal.hide.fade(ng-controller="GeneralInfoCtrl") .modal-header button.close(type='button', data-dismiss='modal') × h3 Edit General Information .modal-body form.form-horizontal.form-condensed .control-group label.control-label First Name .controls input(type='text', placeholder='First Name', ng-model='client.firstName') .control-group label.control-label Last Name .controls input(type='text', placeholder='Last Name', ng-model='client.lastName') .control-group label.control-label Also Known As .controls input(type='text', placeholder='AKA', ng-model='client.aka') .control-group label.control-label Birth Date .controls input(type='text', placeholder='MM/DD/YYYY', ng-model='client.birthDate') ... 

Et mon contrôleur:

 function GeneralInfoCtrl($scope) { $scope.client = { firstName: 'Charlie', lastName: 'Brown', birthDate: new Date(2009, 12, 15), ... } } 

Chaque fois que le compilateur Angular trouve ng-controller dans le code HTML, une nouvelle étendue est créée. (Si vous utilisez ng-view, chaque fois que vous accédez à un autre itinéraire, une nouvelle étendue est également créée.)

Si vous avez besoin de partager des données entre contrôleurs, un service est normalement votre meilleure option. Placez les données partagées dans le service et injectez le service dans le contrôleur:

 function GeneralInfoCtrl($scope, MyService) { 

Chaque instance de scope / contrôleur pourra alors accéder aux données partagées.

Notez que les services sont des singletons, il n’y aura donc qu’une seule instance de vos données partagées.

Voici un violon (je ne l’ai pas écrit) montrant comment deux contrôleurs peuvent partager des données.

Voir aussi AngularJS: Comment passer des variables entre contrôleurs? et
Angularjs: liaisons de données bidirectionnelles et rechargement du contrôleur .

Placez simplement les données partagées dans la scope racine, vous pourrez les utiliser partout. Dans Angular, $rootScope est la racine de toutes les scopes et peut être utilisé dans les contrôleurs pour gérer les données devant être visibles sur tous les modules. Pour l’utiliser, il suffit de l’injecter dans la fonction contrôleur. Pour une explication détaillée, reportez-vous au guide du développeur Angular et à la documentation de l’ API .