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

【问题标题】：AngularJS View not updated after model changed with setTimeout使用 setTimeout 更改模型后，AngularJS 视图未更新
【发布时间】：2018-05-25 16:13:11
【问题描述】：

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

在我的个人资料视图中，我从本地存储中检索用户数据并将其解析为 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>

【问题讨论】：

标签： angularjs settimeout

【解决方案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 的包装。

【讨论】：

【解决方案2】：

或使用$applyAsync

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

【讨论】：