在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对象中更新。

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