2017-08-28 14 views
1

私はAngular Jsを使用して小さなアプリケーションを開発しており、コントローラ内に$localStorageの値を格納しています。今、ビューページ(.htmlページ)でその値を使用したいと思います。

どうすればいいですか?

+0

のようなあなたのビューでこれを表示します'あなたの視点でそれを使用してください。 –

+2

[Angular jsを使用してローカルストレージデータをビューファイルに取得する方法](https://stackoverflow.com/questions/41241835/how-to-get-the-local-storage-data-into-the -view-file-using-angular-js) –

答えて

0

コントローラには、html-view TemplateInject $localStorageに接続されています。

そして、あなたはあなたのビューexapleについては

$localStorageからのすべての機能と値を使用することができます。

$scope.testValue = $localStorage.nameOfFunction 

そして、あなたのビューで、あなたは

{{ testValue }} 
1

ローカルストレージ

のような補間の設定でそれを表示することができますし、localStorageのJavaScriptを使用してデータを取得する:

localStorage.setItem("storageKey", "storedValueGoesHere"); //save into local storage 
var test = localStorage.getItem("storageKey"); //get value from local storage 
console.log(test); //Logs "storedValueGoesHere" 

AngularJS

での使用私はあなたがngStorageモジュール

使用このようなngStorageのjsファイル(気づく、あなたがangularjs後がロードされ、それをロードしてくださいを参照していると仮定していますscriptタグ):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 

<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script> 

今、あなたのコントローラで$localStorageサービスを注入

angular.module('app', ['ngStorage']).controller('Ctrl', function ($scope, $localStorage) { 
       $scope.modelToBeDisaplyedinView = ''; 
       $scope.Save = function() { 
       $localStorage.LocalMessage = "save some text here !"; 
      } 
      $scope.Get = function() { 
       $scope.modelToBeDisaplyedinView = $localStorage.LocalMessage ; 
      }); 

HTML

今 `$スコープに` $ localStorage`変数を割り当て、この

<div ng-app="app" ng-controller="Ctrl"> 
     <input type="button" value="Save" ng-click="Save()" /> 
     <input type="button" value="Get" ng-click="Get()" /> 
<p ng-bind="modelToBeDisaplyedinView "></p> 

<p> {{modelToBeDisaplyedinView }}</p> 
    </div> 
関連する問題