アクセス$ window.sessionStorage from html

Question

私の場合はangularjsで作業していて、保存された値にのユーザーにアクセスして、表示するかどうかを選択します。

まず、いくつかのコントローラにユーザ変数を保存します。これはログインアクションの一部です。

$window.sessionStorage.setItem('user', AuthenticationService.getUser()); 

その後、私は以下のようなもので、そのユーザーの役割に応じて、いくつかのHTMLタグを表示したい：

<li><a id="id" ng-if="user.role=='admin'" href> console </a></li> 

私はこの使用して$ rootScopeに似たものがあったが、ページをリフレッシュすると値が失われます。だから私は使用する必要があるwindow.sessionStorage

保存された値をsessionStorageに保存する方法はありますか？これは間違っていて、別のアプローチが必要ですか？

Answer 1

$ウィンドウはウィンドウの周りのラッパーです。このアプローチはうまくいきますが、クッキーなどの他の手段を使用する方が$ windowを汚染するよりも好ましい方法です。

ユーザーにアクセスするには、コントローラー機能以上のグローバルユーザーサービスを使用する必要があります。

ここでこれを行う方法についてかなり詳細な記事があります：http://www.nesterovsky-bros.com/weblog/2015/01/26/windowsessionStorageInAngularJS.aspx

あなたが複数のユーザープロパティを持っている場合は、のようなセッションストレージにオブジェクトを格納するためにtoJsonとfromJsonを使用します。

var user = { name:'mike', role: 'admin'} 
$window.sessionStorage.setItem('user',angular.toJson(user)); 

と：

var user = angular.fromJson($window.sessionStorage.getItem('user')) 

あなたが別の場所の数から、ユーザーにアクセスする必要がある場合は、 ようなサービス@Deblaton RECOMあなたはあなたのユーザーに複数のプロパティがあると仮定して、上記のようにangular.toJsonとangular.fromJson行を追加します。

あなたのhtml内のユーザーにアクセスしている方法は、あなたのコントローラでサービスアプローチを使用する場合は追加しますので、それが現在のスコープに存在だということを必要とします。

$scope.user = UserService.getUser(); 

Answer 2

あなたはサービスを介してそれを行うことができます/工場

angular.module('myApp').factory("PrincipalService", [ 
    "$window", 
    function($window){ 

     var user; 

     return { 
      getUser : getUser, 
      setUser: setUser 
     }; 

     function getUser(){ 
      return user || angular.fromJson($window.sessionStorage.getItem('user')); 
     } 

     function setUser(userInfo){ 
      user = userInfo; 
      $window.sessionStorage.setItem('user', angular.toJson(userInfo)); 
     } 

    } 
]); 

編集

私はルートを経由して、すべてのビューを共有するためにそれを使用することができます方法スコープ：

angular.module("myApp").run(["$rootScope", "PrincipalService", 
    function($rootScope, PrincipalService){ 
     $rootScope.getUser = PrincipalService.getUser; 
     $rootScope.setUser = PrincipalService.setUser; 
    } 
]); 

そして、あなたの意見では、あなたが呼び出すことができます。

<span>{{$root.getUser()}}</span>