Angular控制器可以綁定到網頁的多個部分嗎？

假設我寫了一個網頁，要求用戶將數據輸入到表單中。假設頁面的兩部分在DOM中完全分離，但在邏輯上是相關的。我需要將它們綁定到一個模型。我可以想到的第一個（壞）解決方案是完全重構頁面，以便綁定到模型的所有東西都包含在一個單獨的<div>元素中（或者甚至可以將控制器放在<body>元素上）。Angular控制器可以綁定到網頁的多個部分嗎？

另一種解決方案可能是將輸入綁定到一個可以成爲兩個不同控制器的成員的對象，但聽起來像是一團糟。

假設HTML看起來像這樣：

<input ng-model='data1' /> 
<div> 
    <!-- something complicated --> 
</div> 
<input ng-model='data2' />

來源

2015-05-28 Daniel Allen Langdon

存儲模型轉變爲服務，並將它注入到雙方的控制器。這不是一個混亂，它是正確的做法。 – Blackhole

黑洞說什麼。服務在你的應用中是單身，他們的數據在你的控制器中是一致的。 –

您可以創建一個共享服務，並注入到兩個控制器。這可以通過factory或service模式來實現。看到SO帖子angular.service vs angular.factory瞭解兩者之間的差異/相似性。

這是做這件事的角度。有關更多信息，請參閱AngularJS services docs。一個簡單的例子可能包括...

<div ng-app="app"> 
    <div ng-controller="ctrlA"></div> 
    <div ng-controller="ctrlB"></div> 
</div>

app.service('sharedService', [function() { 
    this.someValue = 'yo!' 
}]); 

app.controller('ctrlB', ['$scope', 'sharedService', function($scope, sharedService) { 
    console.log(sharedService.someValue) // yo! 
}]); 

app.controller('ctrlA', ['$scope', 'sharedService', function($scope, sharedService) { 
    console.log(sharedService.someValue) // yo! 
}]);

JSFiddle Link

來源

2015-05-28 22:59:57 scniro

感謝您的回答。你能給出一個例子，說明每個div中有文本字段的例子嗎？ –

@DanielAllenLangdon當然肯定。只需將模型綁定到服務值即可。檢查[this jsfiddle]（http://jsfiddle.net/oo62ouvc/）。讓我知道如果有幫助？ – scniro

謝謝。我會在早上嘗試這個:-) –

Angular控制器可以綁定到網頁的多個部分嗎？

回答

相關問題