雙向綁定Angular服務的屬性

Question

我有一個服務settings，它將一些應用程序範圍的設置存儲爲公共變量。 我想讓用戶通過各種input更改這些設置。 因此，我想在服務的屬性和input標記之間建立一個「雙向綁定」。

我目前的做法是將注入服務爲一體的控制器：

.controller('SettingsCtrl', ['settings', '$scope', function (settings, $scope) { 

然後附上的設置範圍：

$scope.questionCount = settings.questionCount; 

然後我寫的範圍拷貝回服務時他們改變：

<input ng-model="questionCount" ng-change="writeBack()"> 

，

$scope.writeBack = function() { 
    settings.questionCount = $scope.questionCount; 
}; 

我在正確的軌道上嗎？實現這種綁定的最佳方式是什麼？

Answer 1

嗯，這取決於。如果你想要一個完整的雙向綁定，你可以使用一個包含所有綁定屬性的服務模型。

例如，您settings服務定義model屬性是這樣的：

this.model = { 
    questionCount: 0 
} 

並在您的控制器的定義附上settings.model到$scope：

$scope.settingsModel = settings.model; 

然後，在HTML，像這樣使用它：

<input ng-model="settingsModel.questionCount"> 

這樣你就不需要依賴ng-change指令，直接在settings服務model對象中更新數據。

缺點是，由於您直接綁定數據，因此您需要小心（在）驗證輸入（特別是在涉及設置時）。例如，不要讓用戶通過使用文本輸入框手動更改其中一個屬性，而是使用選擇框內的預定義值列表。如果你採取這樣的預防措施，你不應該有這種方法的問題。