在不同的元素上使用相同的控制器來引用相同的對象

我想如果我在我的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

在不同的元素上使用相同的控制器來引用相同的對象

回答

相關問題