localStorageを使用した範囲の値の更新角度

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はまだ他の番号に設定されています。

範囲の値をlocalStorageの値と同じように、また範囲の位置を保持する方法はありますか。

Answer 1

コントローラ内のスコーププロパティを初期化する場合は、localScoreの値を使用して$ scope.audio.volumeの値を割り当てる必要があります。例えば ：

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

しかし、あなたはすでにプロパティ「オーディオ」を初期化場合にのみ動作します。音量は「オーディオ」の唯一の財産である場合は、あなたの初期化は次のようになります。その後、初期化したい：

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