Question

这是我的部分观点settings.html

<div ng-controller="settingsController">

    <h3>General Settings</h3>
    <table class="table">
        <tbody>
        <tr class="success">
            <td class = "col-xs-3">Language:</td>
            <td class = "col-xs-9">Gmail display language:
                <select ng-model = "userPreferences.selectedLang" ng-options="language for language in languages">
                    <option value = ""> Choose a language </option>
                </select>
            </td>
        </tr>

        <tr class="danger">
            <td class = "col-xs-3">Conversation View</td>
            <td class = "col-xs-9">
                <input type = "radio" name = "conversation" id = "converseOn" ng-model="userPreferences.converse.state" value = "on" checked>
                <label for="converseOn"> Conversation view on </label>

                <aside>
                    <input type = "radio" name = "conversation" ng-model="userPreferences.converse.status" value = "off" id = "converseOff">
                    <label for="converseOff"> Conversation view off </label>
                </aside>
        </tr>

        <tr class="info">
            <td class = "col-xs-3">Maximum page size: </td>
            <td class = "col-xs-9"> Show conversations per page
                <select ng-model = "userPreferences.selectedNumber" ng-options="conversation for conversation in conversations">
                    <option value = ""> Choose the no.of conversations to display </option>
                </select>

                <aside id = "pageSize" > Show contacts per page
                    <select ng-model = "selectedNumberContacts" ng-options="contact for contact in contacts">
                        <option value = ""> Choose the no.of contacts to display </option>
                    </select>
                </aside>
            </td>
        </tr>
     </tr>
   </tbody>
  </table>

    <div class="form-actions" >
        <button type="submit" class="btn btn-primary" ng-click = "setPreference()">Save changes</button>
        <button type="button" class="btn">Cancel</button>
    </div>
</div>

这是settingsController.js

(function() {
    'use strict';

    var settingController = function (fetchDataService, $scope, savePreferenceService) {
        var url = 'app/mock/settings.json';
        fetchDataService.getContent(url)
            .then(function(response){
                $scope.contacts = response.data.contacts;
                $scope.languages = response.data.languages;
                $scope.conversations = response.data.conversations;
                $scope.undoSend = response.data.undoSend;
            });

        $scope.userPreferences = {
            selectedLang : '',

             converse : {
                  state: 'on'
                 },

              selectedNumber : 0
          }


       $scope.setPreference = function () {
            savePreferenceService.selectedPreferences($scope.userPreferences.selectedLang, $scope.userPreferences.converse.state, $scope.userPreferences.selectedNumber);
        }
    };

    angular.module('iisEmail')
        .controller ('settingsController',
        ['fetchDataService', '$scope', 'savePreferenceService', settingController]);
}());

这是savePreferenceService.js

(function() {
  'use strict';

  var savePreferenceService = function () {
        this.selectedPreferences = function (selectedLang, converse, selectedNumber) {
            this.selectedLang = selectedLang;
            this.converse = converse;
            this.selectedNumber = selectedNumber;

            console.log(this.selectedLang);
            console.log(this.converse);
            console.log(this.selectedNumber);
        }
  };    

      angular.module('iisEmail')
        .service ('savePreferenceService', savePreferenceService);
}());

所以，基本上我的目标是在点击Save changes按钮时保存用户首选项。

为了实现此功能，我在控制器中定义了一个对象，并使用ng-model将其属性绑定到视图。单击保存更改按钮后，将调用setPreference()函数进行服务savePreferenceService调用。 savePreferenceService保存用户选择的选项。一切都按预期工作。

我只是想知道是否有更好的方法（就最佳实践而言）。我的要求是保存用户在服务中选择的选项。

Answer 1

除非您没有在此处显示代码，否则当您执行页面刷新等操作时，我真的不知道如何保存数据？

如果您希望在用户访问您的网页时保留数据保存，您可以随时使用localstorage，它会在用户的浏览器中存储信息。有关如何利用本地存储的各种网络教程，但是这个网站（不需要很长时间才能找到），包括并扩展localstorage作为服务，并使用该服务作为在那里存储数据的方式。

http://learn.ionicframework.com/formulas/localstorage/ （以下代码取自此链接）

angular.module('ionic.utils', [])

.factory('$localstorage', ['$window', function($window) {
    return {
        set: function(key, value) {
        $window.localStorage[key] = value;
    },
    get: function(key, defaultValue) {
        return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
        $window.localStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
        return JSON.parse($window.localStorage[key] || '{}');
    }
}}]);

并使用此服务：

angular.module('app', ['ionic', 'ionic.utils'])

    .run(function($localstorage) {

        $localstorage.set('name', 'Max');
        console.log($localstorage.get('name'));
        $localstorage.setObject('post', {
            name: 'Thoughts',
            text: 'Today was a good day'
        });

    var post = $localstorage.getObject('post');
    console.log(post);
});

或者您可以使用普通旧javascript以旧方式使用localstorage ..

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Answer 2

听起来你拥有的是为你工作的。不确定你的意思是'我只是想知道是否有更好的方法来做到这一点'因为这是非常主观的。

我立即注意到的是，当前的实现会使您的用户首选项基于会话，因为它们仅保留在内存中，这意味着如果用户使用该应用程序，则更改首选项，离开应用程序并返回，变化丢失了。如果你需要保留它们，那么我建议使用LocalStorage或者将它们存储在某种类型的数据存储（文件，数据库......）中。

此外，我建议您将服务作为首选项数据的所有者，而不是在控制器和服务之间分配责任。我的意思是默认首选项由控制器拥有，但只有在更新时它们才能进入服务。我会做的是

将服务更改为具有get方法和set方法。也许是getPreferences（）和setPreferences（...）。
更改控制器以调用getPreferences方法，而不是分配静态首选项对象
从控制器的setPreference方法

AngularJS - 在服务中保存用户首选项

2 个答案: