Ionic 1与AngularJS中Scope值无法在视图中更新的问题

其实你遇到的核心问题是：同一个控制器（LoginCtrl）在不同的路由状态（state）下，会被创建独立的实例。你在loginOptions页面的控制器实例里更新了$scope.loginUserName，但跳转到start页面后，start页面用的是全新的LoginCtrl实例，它的$scope还是初始化时从localStorage读取的旧值——这就是为什么你明明更新了Scope值，视图却没变化的原因。

下面给你几个从简单到规范的解决思路：

方案一：控制器初始化时实时读取localStorage（改动最小） #

既然每次进入start页面都会新建LoginCtrl实例，那我们只需要确保控制器每次初始化时，都从localStorage读取最新的登录信息即可：

// 把这段代码放在LoginCtrl的最顶部，确保每次控制器实例化都拿最新值
$scope.loginUserName = localStorage.getItem("loginUserName");
$scope.userName = localStorage.getItem("userName");
$scope.mobileNumber = localStorage.getItem("mobileNumber");

// 保留你原来的业务方法
$scope.userLogin = function(loginData) {
  // ... 原代码逻辑不变
};

$scope.loginPerson = function(mobileNumber,userName){
  localStorage.setItem("loginUserName",userName);
  // 现在跳转到start后，新的控制器实例会自动读取最新的localStorage值
  $state.go('app.start');
}

这样每次进入start页面，控制器都会重新拉取localStorage里的最新loginUserName，视图就能同步更新了。

方案二：用单例服务共享登录状态（AngularJS最佳实践） #

如果你的项目需要更规范的状态管理，推荐用AngularJS的单例服务来共享登录信息——服务是全局唯一的，所有控制器实例都会共享同一个服务的数据，从根源上避免Scope不同步的问题：

1. 定义登录状态服务 #

angular.module('你的应用模块名').service('LoginStateService', function() {
  // 初始化时从localStorage读取状态
  var loginState = {
    loginUserName: localStorage.getItem("loginUserName"),
    userName: localStorage.getItem("userName"),
    mobileNumber: localStorage.getItem("mobileNumber")
  };

  // 对外提供获取状态的方法
  this.getLoginState = function() {
    return loginState;
  };

  // 对外提供更新登录用户名的方法
  this.updateLoginUserName = function(newName) {
    loginState.loginUserName = newName;
    localStorage.setItem("loginUserName", newName);
  };

  // 可以扩展其他更新方法，比如更新手机号、用户名等
  this.updateUserInfo = function(userInfo) {
    loginState.userName = userInfo.firstName;
    loginState.mobileNumber = userInfo.mobileNumber;
    localStorage.setItem("userName", userInfo.firstName);
    localStorage.setItem("mobileNumber", userInfo.mobileNumber);
  };
});

2. 在控制器中注入并使用服务 #

angular.module('你的应用模块名').controller('LoginCtrl', function($scope, $state, userService, LoginStateService) {
  // 从服务获取共享的登录状态
  var loginState = LoginStateService.getLoginState();
  $scope.loginState = loginState; // 绑定到Scope，视图可以直接用

  $scope.userLogin = function(loginData) {
    userService.userLogin(loginData).then(function(success) {
      var res = success.message;
      if(res === 'success'){
        // 通过服务更新全局状态
        LoginStateService.updateUserInfo(success);
        LoginStateService.updateLoginUserName(success.firstName);
        
        $scope.loginData = {};
        $state.go('app.home');
      }else{
        $scope.message ='Wrong pin.Try again or click Forgot password to reset it.';
      }
    },function(error){ });
  };

  $scope.loginPerson = function(mobileNumber,userName){
    // 通过服务更新全局状态
    LoginStateService.updateLoginUserName(userName);
    console.log("In loginPerson:"+userName);
    $state.go('app.start');
  }
});

3. 视图直接绑定服务状态 #

<!-- start.html -->
<span ng-if="loginState.loginUserName !=null">
<p class="startP">Enter pin for {{loginState.loginUserName}} <i class="icon ion-chevron-down" ui-sref="app.loginOptions"></i></p>
</span>

这种方式下，不管哪个路由的控制器实例，都共享同一个服务的状态，再也不会出现视图不同步的问题。

方案三：用$rootScope广播事件（适合简单场景） #

如果只是临时解决这个问题，也可以用事件广播的方式：在更新用户名后广播一个事件，让start页面的控制器监听并更新自己的Scope：

// 在loginPerson方法中广播事件
$scope.loginPerson = function(mobileNumber,userName){
  localStorage.setItem("loginUserName",userName);
  // 广播更新事件，携带新用户名
  $rootScope.$broadcast('loginUserNameUpdated', userName);
  console.log("In loginPerson:"+userName);
  $state.go('app.start');
}

// 在LoginCtrl中监听事件
$scope.$on('loginUserNameUpdated', function(event, newUserName) {
  $scope.loginUserName = newUserName;
});

不过这种方式不如服务规范，适合快速临时解决问题，长期来看还是服务的方式更易维护。

内容的提问来源于stack exchange，提问作者Hema