双向绑定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对象中更新数据。

缺点是，由于您直接绑定数据，因此您需要小心（在）验证输入（特别是在涉及设置时）。例如，不要让用户通过使用文本输入框手动更改其中一个属性，而是使用选择框内的预定义值列表。如果你采取这样的预防措施，你不应该有这种方法的问题。