兩個嵌套控制器之間的Angular.js雙向數據綁定

我很好奇，有沒有一種合適的方式來處理/實現兩個嵌套控制器之間的雙向數據綁定。讓我解釋一下這個場景。兩個嵌套控制器之間的Angular.js雙向數據綁定

我有一個formController，其中有一些表單元素。其中一個表單元素是一個多選控件，爲此我創建了一個可以在其他地方使用的部分HTML，並且這個部分使用一個單獨的控制器運行，讓它調用multiSelectController（注意，這個控制器/部分/視圖嵌套在form/formController）。

我想要的是能夠有formController（它有數據），以「選定」的項目，如[1,3,7,10]列表中傳遞到多選部分，這將那麼就可以使用正確的選項來渲染窗口小部件。同時，當一個項目被取消選中或從多選部分中選擇時，我希望能夠將新選定列表傳遞給formController/scope（所以我可以顯示說1,3,5現在被選中）。所以爲了簡化問題，我想知道在保留數據綁定的同時將模型/變量傳遞給子視圖/控制器的最佳/ corerct方法，因此子視圖/控制器可以更改當它更新父級時，它內部的所述變量。

來源

2014-11-24 decay

根據我的最好的辦法是：

創建服務，將容納所有的模型變量。

angular.service("dataService", function() { 

    this.value1 = ""; 
    this.value2 = ""; 
});

參考，在你的控制器服務，節省他們的範圍參考。

angular.controller("myCntrl1", function($scope, dataService) { 
    $scope.dataService = dataService; 
}); 


angular.controller("myCntrl2", function($scope, dataService) { 
    $scope.dataService = dataService; 
});

現在在你的HTML，你是指使用服務引用你所有的模態變量：

// Controller 1 view 
    <div ng-controller="myCntrl1"> 
     <input type="text" ng-model="dataService.value1" /> 
    </div> 

    // Controller 2 view 
    <div ng-controller="myCntrl2"> 
     The value entered by user is {{dataService.value1}} 
    </div>

來源

2014-11-24 04:47:14

這不是我想要的。使用服務非常棒，但對於我的情況來說這是一個糟糕的主意（否則我會在非常簡單的情況下獲得100多項服務）。 – decay 2014-11-24 22:25:49

你怎麼能得到數百個服務@decay？爲什麼你不能使用一個或幾個服務來保存你需要堅持的一切？ – 2014-11-25 03:51:43

由於表單控制器是一個父控制器，你不用擔心訪問它的模型/ varaibales，只需在子範圍內添加$父母即可訪問任何父級財產

$scope.$parent.someProperty

因此，如果喲你改變或更新這個變量，它也會自動更新到父級的範圍內。

來源

2014-11-24 04:49:22 RahulB

知道這一點，這是正確的，但不確定這是否是正確的方法。正在尋找更多的方法來「傳遞」子視圖/控制器一組輸入值/對象，它可以編輯，同時保持雙向綁定。通過傳遞屬性可以很容易地通過指令實現，但是沒有一種方法可以在沒有新指令的情況下實現（並且傳遞特定的對象而不是調用子對象並查找父對象）？ – decay 2014-11-24 22:30:52

@decay：這種方法沒有錯。看，無論如何，你必須通過子控制器來更改父級範圍內的對象/變量。你也可以直接使用$ scope的子控制器來做它，它會在原型鏈中查找該變量並訪問它。 $ scope。$ parent更快！你只能改變特定的父對象。它不會影響父母範圍的其他對象。 – RahulB 2014-11-25 04:10:03

@decay：此方法也很重要，因爲您需要維護雙向綁定，並且只能通過更新父級範圍中的對象來實現。父級範圍內不會顯示局部變量更新。 – RahulB 2014-11-25 11:36:14

兩個嵌套控制器之間的Angular.js雙向數據綁定

回答

相關問題