Question

我有一个登录功能，它从我的后端获取用户数据并将其存储在设备的本地存储中。

在我的个人资料视图中，我从本地存储中检索用户数据并将其解析为json，它在首次登录尝试时成功获取数据，但是当我登录到另一个帐户时，视图不会更新，即使来自本地存储的用户数据的值发生变化。

下面是我的登录和配置文件控制器的代码

var app = angular.module('starter.controllers', []);

app.controller('LoginCtrl', function(apiURL, $scope, $state, $http, $ionicLoading,$ionicPopup) {

var userData =localStorage.getItem('user');

if (userData != null || userData != undefined) {
  $state.go('app.browse');
}

   $scope.LogIn = function() {
      var url = apiURL+'/login.php';

      var credentials = {
         username: document.getElementById('username').value, 
         pword: document.getElementById('pword').value
      };

      $http.post(url,credentials).then(function(result){
         localStorage.setItem('user',JSON.stringify(result.data));
         $state.go('app.browse',{},{reload: true});
       }).catch(function(error){
          //error
       })
    };
});


app.controller('ProfileCtrl', function(webURL, apiURL, $scope, $stateParams, $state) {
    $scope.data = JSON.parse(localStorage.getItem('user'));

    $scope.goTo = function(id){
      $state.go('app.pet',{petId:id},{reload: true});
    }

    $scope.doRefresh = function() {
      setTimeout( function() {
        $scope.data = JSON.parse(localStorage.getItem('user'));
      }, 1000);

      $scope.$broadcast('scroll.refreshComplete');
    };
})

这是我的观点

 <div class="list">
    <a class="item item-thumbnail-left item-icon-right">
      <img ng-src="{{url}}/{{data.userData.avatar}}" id="myImage" >
      <h2 class="cli_name">{{data.userData.cli_name}}</h2>
      <p>{{data.userData.cli_address}}<br>
         {{data.userData.cli_cont}}<br>
         {{data.userData.cli_email}}</p>
      <button class="button button-icon icon ion-image" ng-click="loadImage()"></button>
    </a>
</div>

Answer 1

使用$timeout service：

$scope.doRefresh = function() {
  ̶s̶e̶t̶T̶i̶m̶e̶o̶u̶t̶(̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
  $timeout( function() {
    $scope.data = JSON.parse(localStorage.getItem('user'));
  }, 1000);

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流程。这将JavaScript拆分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

$timeout服务是AngularJS的window.setTimeout包装器。

Answer 2

或使用$applyAsync

$scope.doRefresh = function() {
  $applyAsync(() => {
   $scope.data = JSON.parse(localStorage.getItem('user'));
};

使用setTimeout更改模型后，AngularJS视图未更新

2 个答案: