모델이 setTimeout으로 변경된 후 AngularJS보기가 업데이트되지 않았습니다.

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가 클래식 및 AngularJS 실행 컨텍스트로 분할됩니다. AngularJS와 실행 환경에서 적용되는 전용 작업 등 데이터 바인딩 AngularJS와, 예외 처리, 시청 속성

$timeout 서비스 window.setTimeout위한 AngularJS와의 래퍼 이점 것이다.

Answer 2

또는 사용 $applyAsync

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