android - 如何从 Ionic/Angularjs 项目中的 localStorage 检索用户详细信息

Question

我是新来的。正在 Cordova 上使用 ionic 和 angularjs 开发 Android 应用程序。在各种 View 中登录时处理存储在 localStorage 中的用户详细信息时遇到困难。我将 Controller1 附加到 view1，用户在登录时被定向到该 View ，并且用户用户名显示正常。当我从附加到 Controller2 的 view1 导航到 view2 时，它还会显示用户的电子邮件。然后，如果当前用户注销并且另一个用户登录，view1 将显示正确的新用户的用户名，但是当我导航到 view2 时，我会看到前用户的电子邮件，直到我刷新页面，然后才能正确显示新用户的电子邮件。请问如何处理示波器模型更新？

在我的 Controller js 文件中，我有:

.controller('Controller1', [  
  '$scope',  
  '$timeout',
  'userAccountService',

  function($scope, $timeout, userAccountService,){
  $scope.user = {};

    if (window.localStorage['USER_DETAILS']){
    $scope.isAuthenticated = true;
        var getUserDetails = JSON.parse(localStorage.getItem("USER_DETAILS"));
        $scope.user.username = getUserDetails.username;
    }
    $scope.$on('USER_LOGGED_IN', function() {
      $scope.isAuthenticated = true;
      var getUserDetails = JSON.parse(localStorage.getItem("USER_DETAILS"));
      $scope.user.username = getUserDetails.username;
    });
});

    .controller('Controller2', [

      '$scope',  
      'userDetailsService', 
      function($scope, userDetailsService){

          $scope.user = {};   
          $scope.user.email = userDetailsService.userDetails.email;

          $scope.$on('USER_LOGGED_IN', function() {

             $scope.user.email = userDetailsService.userDetails.email;
          });

    });

在 View1 中我有:

<ion-list>
  <ion-item class="content-margin-bottom content-radius" href="#/me/signin" ng-show="!isAuthenticated">
      User Account<span class="float-right link-color">Sign in <i class="icon ion-chevron-right icon-accessory"></i></span>
  </ion-item>
  <ion-item class="content-margin-bottom content-radius" href="#/me/view2" ng-show="isAuthenticated">
      User Account<span class="float-right link-color">{{user.username}}<i class="icon ion-chevron-right icon-accessory"></i></span>
  </ion-item>
</ion-list>

这是我的服务 js 文件中的内容:

    .service('userAccountService', function($rootScope, $timeout){  

        this.logOut = function(){
            window.localStorage.removeItem("USER_DETAILS");
        };

    })


    .factory('userDetailsService', function(){
        var userDetails = JSON.parse(localStorage.getItem("USER_DETAILS"));
        return{
            userDetails: userDetails
        };  
    });

在 view2 中我有:

    <ion-list>

      <ion-item class="content-radius-top" href="#">
          Email<span class="float-right link-color">{{user.email}}</span>
      </ion-item>

    </ion-list>

我希望这些信息有帮助。同样，我在这里试图实现的目标是能够获取本地存储中的用户详细信息，并且当用户注销而另一个用户登录时，新用户应该能够显示自己的详细信息。我的问题是，除非刷新页面，否则我会继续看到前一个用户的详细信息。我想我需要一种方法来重置模型值

Answer 1

ionic 框架中的 View 是 cached ，这就是您不断看到相同细节的原因。

解决该问题的肮脏技巧是使用属性 cache-view 告诉您的 View 不要被缓存:

<ion-view view-title="my view" cache-view="false">

这样做你的 View 将一直被加载( Controller )。 它可能很好，但您会失去框架可以为您提供的一些性能技巧。

另一个选项是在登录后使用 $ionicHistory 清理缓存。服务。

$ionicHistory.clearHistory()
$ionicHistory.clearCache()

我可以看到您正在广播一些 Activity 。你可以在那里做点什么。

更新:

我对你们服务的实现并不满意。 我会做这样的事情:

(function () {

    'use strict';

    angular
        .module('app.services', [])
        .factory('userAccountService', userAccountService);

    userAccountService.$inject = ['$q'];

    function userAccountService($q) {

        var service = {
            user: { username: '' },
            logIn: logIn,
            logOut: logOut,
        };

        return (service);

        function logIn(username, password)
        {
            this.user = {username: 'Doublechyke'}
        }

        function logOut()
        {
            this.user = { username: '' };
        }
    };

})();

当然，这过于简化，但应该可以。 您将拥有一项导出 2 个方法(logIn 和 logOut)和一个对象(user)的服务(单例)。

您可以调用服务的方法来登录/注销，并将登录的用户保留在对象中，该对象将存在于上下文中:

userAccountService.logIn('username', 'password');

在第二个 View 中，您可以直接从服务读取您的用户:

.controller('view2Controller', function($scope, userAccountService) {

  $scope.user = userAccountService.user || null;

});

您可以查看此简单实现的示例 here .

我还建议您使用 Angular localstorage .

注意:

我用一些准则来定义我的对象。您应该尝试遵循此specs .