Использование одного и того же контроллера на разных элементах для обращения к одному и тому же объекту

Я решил, что если я надавил ng-controller="GeneralInfoCtrl" на несколько элементов в моей DOM, они разделили бы те же $scope (или минимальная двусторонняя привязка не работает).

Причина, по которой я хочу сделать это, состоит в том, что у меня разные представления только для чтения с соответствующими модальными диалогами в самых разных частях HTML, и они не имеют общего предка (кроме <body> и <html>).

Есть ли способ заставить обоих контроллеров ссылаться на один объект/сделать привязку данных между ними?

Вот код для тех, кто настаивает на разметке, написанной в 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') &times;
        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')
...

И мой контроллер:

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

Ответы

Ответ 1

Каждый раз, когда компилятор Angular находит ng-контроллер в HTML, создается новая область. (Если вы используете ng-view, каждый раз, когда вы переходите на другой маршрут, создается новая область.)

Если вам нужно обмениваться данными между контроллерами, обычно ваш лучший вариант. Поместите общие данные в службу и введите службу в контроллер:

function GeneralInfoCtrl($scope, MyService) {

Каждый экземпляр экземпляра/контроллера будет иметь доступ к общим данным.

Обратите внимание, что сервисы являются одноточечными, поэтому вокруг ваших общих данных будет только один экземпляр.

Вот fiddle (я его не писал), показывающий, как два контроллера могут обмениваться данными.

См. также AngularJS: Как передать переменные между контроллерами? и
Angularjs: двусторонние привязки данных и перезагрузка контроллера.

Ответ 2

Просто поместите общие данные в корневую область, вы сможете использовать их повсюду. В Angular $rootScope используется корень всех областей и может использоваться в контроллерах для управления данными, которые должны быть видимыми во всех модулях. Чтобы использовать его, просто введите его в функцию контроллера. Подробное описание см. В Angular руководстве разработчика и в API документ.