Usando o mesmo controlador em elementos diferentes para se referir ao mesmo object

Eu imaginei que se eu colocasse ng-controller="GeneralInfoCtrl" em vários elementos no meu DOM, eles compartilhariam o mesmo $scope (ou pelo menos a binding de duas vias não está funcionando).

A razão pela qual eu quero fazer isso é porque eu tenho diferentes visualizações somente leitura com diálogos modais associados em partes muito diferentes do HTML e eles não compartilham um ancestral comum (além de e ).

Existe uma maneira de fazer os dois controladores se referirem ao mesmo object / fazer a binding de dados funcionar entre eles?


Aqui está um código para aqueles que insistem em ver marcação, escrito em 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') ... 

E meu controlador:

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

Cada vez que o compilador Angular encontra ng-controller no HTML, um novo escopo é criado. (Se você usar ng-view, cada vez que você vai para uma rota diferente, um novo escopo é criado também.)

Se você precisar compartilhar dados entre controladores, normalmente um serviço é sua melhor opção. Coloque os dados compartilhados no serviço e injetar o serviço no controlador:

 function GeneralInfoCtrl($scope, MyService) { 

Cada instância de escopo / controlador poderá acessar os dados compartilhados.

Observe que os serviços são singletons, portanto, haverá apenas uma instância de seus dados compartilhados.

Aqui está um violino (não o escrevi) mostrando como dois controladores podem compartilhar dados.

Veja também AngularJS: Como posso passar variables ​​entre controladores? e
Angularjs: ligações de dados bidirecionais e recarregamento do controlador .

Basta colocar os dados compartilhados no escopo da raiz, e você poderá usá-los em qualquer lugar. Em Angular, $rootScope é a raiz de todos os escopos e pode ser usado em controladores para gerenciar dados que devem estar visíveis em todos os módulos. Para usá-lo, basta injetá-lo na function do controlador. Para uma explicação detalhada, consulte o guia do desenvolvedor Angular e o documento API .