在不同的元素上使用相同的控制器来引用相同的对象答案

【问题标题】：Using the same controller on different elements to refer to the same object在不同的元素上使用相同的控制器来引用相同的对象
【发布时间】：2013-01-22 23:41:35
【问题描述】：

我想如果我将 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),
        ...
    }
}

【问题讨论】：

标签： angularjs

【解决方案1】：

每次 Angular 编译器在 HTML 中找到 ng-controller 时，都会创建一个新范围。（如果你使用 ng-view，每次你去不同的路线时，也会创建一个新的范围。）

如果您需要在控制器之间共享数据，通常服务是您的最佳选择。将共享数据放入服务中，并将服务注入到控制器中：

function GeneralInfoCtrl($scope, MyService) {

然后每个作用域/控制器实例将能够访问共享数据。

请注意，服务是单例的，因此您的共享数据只有一个实例。

这是一个fiddle（不是我写的），展示了两个控制器如何共享数据。

另请参阅AngularJS: How can I pass variables between controllers? 和
Angularjs: two way data bindings and controller reload。

【讨论】：

【解决方案2】：

只需将共享数据放在根范围内，您就可以在任何地方使用它们。在 Angular 中，$rootScope 是所有作用域的根，可以在控制器中用于管理必须在所有模块中可见的数据。要使用它，只需将其注入控制器功能。详细说明请参阅Angular developer's guide 和API doc。

【讨论】：

谢谢。在开发人员指南中找不到提到 $rootScope，但它在 API 中。这真的是最好的方法吗？我不需要访问其他“模块”，就在这个控制器内部。
另外，假设我确实希望在一个页面上有多个客户端，然后单击其中一个旁边的某个“编辑”按钮将使用该客户端的控制器/范围，而不是全局/共享的... 然后怎样呢？也许我需要做更多的阅读......
您可以在同一个页面中拥有多个控制器，每个控制器都有自己独立的范围。如果您不是偶尔需要共享数据，您应该考虑使用“服务”。阅读the developer's guide 中的“正确使用控制器”部分。