AngularJS视图内变量不更新问题排查求助

你遇到的核心问题是AngularJS中每个ng-controller指令都会创建一个独立的控制器实例。当你在ng-repeat循环里的每个<div ng-controller="Gid">，都会生成一个全新的Gid控制器实例；而跳转到view1后，页面上的<div ng-controller="Gid">又是另一个完全独立的Gid实例。这两个实例的$scope是互相隔离的，所以你在第一个实例里赋值的$scope.gid，第二个实例根本访问不到——哪怕你在控制器顶部初始化$scope.gid = null，也只是给每个新实例的gid设了初始值，和之前实例的gid无关。

AngularJS的服务是单例模式，整个应用里只会存在一个实例，非常适合用来在不同控制器间共享数据。

步骤1：创建共享数据服务 #

// 假设你的应用模块叫app，先定义服务
app.service('GidSharedService', function() {
  // 私有变量存储gid值
  var _gid = null;

  // 对外暴露的设置和获取方法
  this.setGid = function(id) {
    _gid = id;
  };

  this.getGid = function() {
    return _gid;
  };
});

步骤2：修改原Gid控制器，将ID存入服务 #

.controller('Gid', function($scope, $http, $location, GidSharedService){ 
  $scope.getGid = function(id){ 
    // 这里保留你的HTTP请求逻辑，测试阶段也可以直接处理
    // 把ID存入单例服务
    GidSharedService.setGid(id);
    
    // 跳转页面
    $location.path('/view1');
  } 
})

步骤3：在view1的控制器中获取ID #

给view1单独创建一个控制器（避免和之前的Gid控制器混淆），注入服务获取gid：

app.controller('View1Controller', function($scope, GidSharedService){
  // 初始化获取gid值
  $scope.gid = GidSharedService.getGid();

  // 如果你需要监听gid的后续变化，可以添加$watch
  $scope.$watch(function() {
    return GidSharedService.getGid();
  }, function(newGid) {
    $scope.gid = newGid;
  });
})

步骤4：修改view1的HTML #

<div ng-controller="View1Controller"> 1 - {{ gid }} </div>

如果你的场景只需要传递ID到view1，也可以把ID放在URL的路由参数里，不需要额外的服务。

步骤1：配置路由（假设使用ngRoute） #

app.config(function($routeProvider) {
  $routeProvider
    .when('/view1/:gid', {
      templateUrl: 'view1.html',
      controller: 'View1Controller'
    });
});

步骤2：修改跳转逻辑，携带ID到URL #

.controller('Gid', function($scope, $http, $location){ 
  $scope.getGid = function(id){ 
    // 把ID作为路由参数拼到URL里
    $location.path('/view1/' + id);
  } 
})

步骤3：在View1Controller中获取路由参数 #

app.controller('View1Controller', function($scope, $routeParams){
  // 从路由参数中获取gid
  $scope.gid = $routeParams.gid;
})

这样view1的HTML同样用上面的<div ng-controller="View1Controller"> 1 - {{ gid }} </div>就能正常显示ID了。

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