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

我想如果我在我的DOM中的多个元素上打了一个ng-controller="GeneralInfoCtrl"，他们将共享相同的$scope（或者至少双向绑定不起作用）。在不同的元素上使用相同的控制器来引用相同的对象

我想这样做的原因是因为我有不同的只读的HTML非常不同部位与相关模态对话框的观点，他们不（从<body>和<html>除外）共享一个共同的祖先。

是否有一种方法可以使两个控制器引用它们之间的相同对象/数据绑定工作？

这里是为那些谁坚持看到标记一些代码，写在玉：

.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), 
     ... 
    } 
}

来源

2013-01-22 mpen

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

来源

2013-01-22 07:16:50 remigio

谢谢。在开发人员指南中找不到'$ rootScope'，但它在API中。这真的是最好的方法吗？我不需要访问其他“模块”，就在这个控制器内部。 – mpen

另外，假设我确实想让多个客户端在一个页面上，点击其中一个旁边的某个“编辑”按钮，将为该客户端使用控制器/范围，而不是全局/共享的控制器/范围......然后呢？也许我需要做更多的阅读...... – mpen

您可以在同一页面中拥有多个控制器，每个控制器都有自己独立的范围。如果你不需要共享数据，你应该考虑使用“服务”。请阅读[开发人员指南]（http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller）中的“正确使用控制器”部分。 – remigio

每次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。

来源

2013-01-22 15:41:35

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

回答

相关问题