AngularJS：console可查看变量值但vm.habitantId无法赋值问题

这个问题我之前也碰到过，核心原因是Angular的变更检测没有被触发——虽然你在回调里成功给vm.habitantId赋了值，但Angular没察觉到这个变化，导致视图或后续代码里看不到更新后的结果。

给你两个靠谱的解决方案，按优先级推荐：

1. 使用$resource的.$promise（最稳妥） #

$resource的查询方法返回的对象自带.$promise属性，用它处理异步响应时，Angular会自动管理变更检测，不需要手动干预。修改后的代码如下：

habitantsResource.query({ 
  $filter: "startswith(Email, '" + vm.email + "')", 
})
.$promise.then(function(data) {
  vm.habitantId = data[0].habitantId;
  console.log(data[0].habitantId);
});

这种方式的优势在于，then回调是在Angular的digest循环上下文内执行的，赋值后Angular会自动触发变更检测，vm.habitantId的变化会立刻被视图和其他代码感知到。

2. 手动触发变更检测（仅当第一种方式不适用时用） #

如果你坚持要用原来的回调写法，可以注入$scope并手动调用$scope.$apply()来触发变更检测。注意要确保控制器里已经注入了$scope：

// 先确保控制器注入了$scope
angular.module('yourApp').controller('YourController', ['$scope', 'habitantsResource', function($scope, habitantsResource) {
  var vm = this;
  
  habitantsResource.query({ 
    $filter: "startswith(Email, '" + vm.email + "')", 
  }, function(data) {
    vm.habitantId = data[0].habitantId;
    console.log(data[0].habitantId);
    // 手动触发变更检测，避免重复触发报错
    if (!$scope.$$phase) {
      $scope.$apply();
    }
  });
}]);

不过这种方式要小心，直接调用$scope.$apply()可能会抛出"digest already in progress"的错误，所以最好加个判断，确认当前没有在digest循环中再执行。

另外再提醒一个小细节：如果你的视图里没有用ng-controller="YourController as vm"的语法绑定控制器，那vm的属性可能无法正确映射到视图上，这点也要检查一下哦。

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