Question

我的代码非常简单。这是一个名为“设置”的离子屏幕，其中有一个名为“每周小时数”的内容。

<ion-view title="Settings">
<ion-content class="has-header">
    <ul class="list">
        <label class="item item-input item-label">
        <span class="input-label">Hours per week</span>
        <input type="text" ng-model="hoursPerWeek" value="37">
        </label>
    </ul>
    <button class="button button-balanced" ng-click="submitClicked()">
       Save
    </button>
</ion-content>
</ion-view>

此设置屏幕正在使用我的app.js文件中定义的SettingsCtrl。这是我的控制器（编辑）：

angular.module('starter.controllers', [])           

.controller('SettingsCtrl', function($scope) {
    $scope.hoursPerWeek = '37';
    $scope.submitClicked = function(){
        localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
        console.log("Set Value of hoursPerWeek as : " + $scope.hoursPerWeek);
    }
})

从上面可以看出，它使用了角度局部存储模块，我已经确保将其注入到应用程序中，如下所示：

angular.module('starter', ['ionic', 'starter.controllers', 'LocalStorageModule'])

问题是submitClicked()似乎不起作用。就像我将每周的小时值更改为42（从37），它似乎适用于当前的localhost会话。当我停止服务器并再次运行它时，值会回到37.我不知道这里出了什么问题。任何帮助将不胜感激。我正面临一个新的错误，如下面的编辑2所述。

编辑1 （已修复）： @icewind，这是我面临的错误

TypeError: localStorage.get is not a function
at new <anonymous> (controllers.js:45)
at Object.instantiate (ionic.bundle.js:18015)
at $controller (ionic.bundle.js:23417)
at Object.self.appendViewElement (ionic.bundle.js:59908)
at Object.render (ionic.bundle.js:57901)
at Object.init (ionic.bundle.js:57821)
at Object.self.render (ionic.bundle.js:59767)
at Object.self.register (ionic.bundle.js:59725)
at updateView (ionic.bundle.js:65400)
at ionic.bundle.js:65377

编辑2：

这次我没有错误。我可以从Save按钮调用submitClicked（），但现在问题是，该值重置为37.我在submitClicked（）函数中添加了一个控制台日志功能，如上面编辑的控制器代码

我试图通过输入42来修改hoursPerWeek的值，当我点击“保存”按钮时，我在控制台上获取的内容是：

Set Value of hoursPerWeek as : 37

Answer 1

如果可以，您必须使用localStorage中的值

.controller('SettingsCtrl', function($scope, localStorageService) {
    $scope.hoursPerWeek = localStorageService.get('hoursPerWeek') || 37;
    $scope.submitClicked = function(){
        localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
    }
})

并配置您的注射器以提供它。否则你只是保存它并且从未使用过

Answer 2

以下是我修复代码的方法。我对HTML进行了一些修改。它看起来几乎与我提出问题的时间相似：

<ion-view title="Settings">
<ion-content class="has-header">
    <ul class="list">
        <label class="item item-input item-label">
        <span class="input-label">Hours per week</span>
        <input type="text" ng-model="config.hoursPerWeek">
        </label>
    </ul>
    <button class="button button-balanced" ng-click="save()">
           Save
    </button>
</ion-content>
</ion-view>

这是控制器。我不得不在这里做一些改变。它现在看起来像这样：

.controller('SettingsCtrl' , function($scope, localStorageService) {
    $scope.config = {
        hoursPerWeek: localStorage.getItem('hoursPerWeek' , 37) || 37
    };

    $scope.save = function() {
     console.log($scope.config.hoursPerWeek);
     localStorage.setItem('hoursPerWeek', $scope.config.hoursPerWeek);
    };
})

@icewind的想法实际上激发了这个答案。

感谢。

离子按钮点击不工作

2 个答案: