En utilisant le même contrôleur sur des éléments différents pour désigner le même objet
J'ai pensé que si j'ai giflé ng-controller="GeneralInfoCtrl" sur plusieurs éléments dans mon DOM ils partagent la même $scope (ou au moins deux voies de liaison ne fonctionne pas).
La raison pour laquelle je veux faire, c'est parce que j'ai différents en lecture seulement les points de vue associés à des boîtes de dialogue modales dans des régions très différentes de l'HTML, et ils ne partagent un ancêtre commun (en dehors de <body> et <html>).
Est-il un moyen de faire les deux contrôleurs font référence au même objet/faire la liaison de données le travail entre eux?
Voici un code pour ceux qui insistent sur le voyant de balisage, écrit dans 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') <i class="icon-pencil"></i> 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),
...
}
}Vous devez vous connecter pour publier un commentaire.
À chaque fois l'angle de compilateur trouve ng-controller dans le code HTML, un nouveau champ d'application est créé. (Si vous utilisez ng-view, à chaque fois que vous passez à une autre voie, une nouvelle est créée en trop.)
Si vous avez besoin de partager des données entre les contrôleurs, normalement un service est votre meilleure option. Mettre les données partagées dans le service, et injecter le service dans le contrôleur:
Chaque portée/contrôleur instance sera alors en mesure d'accéder aux données partagées.
Veuillez noter que les services sont des singletons, donc il n'y aura qu'une seule instance de vos données partagées autour de.
Ici est un violon (je n'ai pas l'écrire) en montrant comment les deux contrôleurs peuvent partager des données.
Voir aussi AngularJS: Comment puis-je passer des variables entre les contrôleurs? et
Angularjs: deux façon de liaisons de données et le contrôleur de recharger.
Simplement mettre des données partagées à la racine de la portée, vous serez en mesure de les utiliser partout. Dans Angulaire
$rootScopeest la racine de tous les étendues et peuvent être utilisés dans les contrôleurs de gestion des données qui doivent être visibles à travers tous les modules. Pour l'utiliser juste pour l'injecter dans la fonction de contrôleur. Pour une explication détaillée, reportez-vous à la Angulaire guide du développeur et à la Doc API.$rootScopedans le guide du développeur, mais c'est dans l'API. Est-ce vraiment la meilleure approche? Je n'ai pas besoin d'accès dans d'autres "modules", juste à l'intérieur de ce contrôleur.