在Angular中双向绑定到服务的属性

Question

I have a service settings that stores some application-wide settings as public variables. I want to let the user change these settings through various input s. Therefore, I want to set up a "two-way binding" between a property of the service and an input tag.

My current approach is to inject the service into a controller:

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

then I attach the settings to the scope:

  $scope.questionCount = settings.questionCount;

then I write the scope copies back to the service when they change:

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

,

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

Am I on the right track here? What's the best way to achieve this kind of binding?

Answer 1

Well, it depends. If you want a full two-way binding you can use a service model that holds all the bindable properties.

For example, on your settings service define a model property like this:

this.model = {
  questionCount: 0
}

And on your controller's definition attach the settings.model to the $scope :

$scope.settingsModel = settings.model;

Then, on the HTML, use it like this:

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

This way you don't need to rely on the ng-change directive, the data is updated directly in the settings service model Object.

The drawback is that, since you are directly binding the data, you need to be careful to (in)validate the input (especially when comes to settings). For example, don't allow the user to change manually one of the properties by using a text input box, instead use a list of pre-defined values within a select box. If you take such precautions you shouldn't have problems with this approach.