Обновите значение диапазона, используя localStorage Angular

Question

Я пытаюсь обновить значение диапазона ввода в Angular, используя 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 по-прежнему установлен на другой номер.

Как я могу сохранить значение диапазона таким же, как значение из localStorage, а также положение диапазона.

Answer 1

Я решил эту проблему с помощью функции наблюдения, которая обновляет значение каждый раз, когда происходит изменение.

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

Answer 2

Везде, где вы инициализируете свои свойства области действия внутри контроллера, вы должны присваивать значение $scope.audio.volume, используя значение из localStorage. например:

$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);
  }
}]);