angularjs - 使用 localStorage Angular 更新范围值

Question

我正在尝试使用localStorage.

这就是我的 HTML 中的内容：

input type="range" id="myRange" value={{audio.volume}}  min="0" max="1" step="0.01" ng-model="audio.volume" ng-change="adjustVolume()"

我希望范围的值是动态的。

这是我的js：

$scope.adjustVolume = function (){ 
  localStorageService.set("volume",$scope.audio.volume);
}

这样，我设法将“音量”键保存在 中localStorage，但是如果我刷新页面，范围滑块的位置又回到 1，即使localStorage仍然设置为其他数字。

如何保持范围的值与 from 的值以及范围localStorage的位置相同。

Answer 1

无论您在控制器内的何处初始化范围属性，都需要使用 localStorage 中的值分配 $scope.audio.volume 的值。例如：

$scope.audio.volume = localStorageService.get("volume");

但这仅在您已经初始化属性“audio”时才有效。如果音量是您要初始化的“音频”的唯一属性，那么您的初始化应该如下所示：

$scope.audio = {'volume':localStorageService.get("volume")};

因此控制器的示例如下所示：

var myApp = angular.module('myApp',[]);

myApp.controller('MyAudioController', ['$scope', function($scope) {
  $scope.audio = {'volume':localStorageService.get("volume")};//<--THIS IS IMPORTANT
  $scope.adjustVolume = function (){ 
     localStorageService.set("volume",$scope.audio.volume);
  }
}]);

Answer 2

我通过使用 watch 功能解决了这个问题，每次发生变化时都会更新值。

         $scope.$watch(function(){
            $scope.audio.volume = localStorageService.get("volume");                
            return true;
        });