Angular中服务器响应数据无法传递到$scope的问题求助

看起来你遇到的问题大概率是控制器作用域实例不共享导致的，我来帮你一步步排查和解决：

首先要明确核心问题：你在登录方法里设置的$scope.first_name，和header模板里AuthCtrl实例的$scope不是同一个！如果登录表单所在的元素和header的<div ng-controller="AuthCtrl">是分开的，Angular会为每个ng-controller指令创建一个新的控制器实例，它们的作用域完全独立。所以登录成功后你给一个实例的$scope赋值，另一个实例的模板自然看不到。

接下来给你两种解决方案，推荐第二种，更符合AngularJS的最佳实践：

方案1：统一控制器作用域 #

把AuthCtrl挂载到更高层级的DOM元素上，比如整个<body>或者包裹登录表单和header的父容器，这样所有子元素都共享同一个控制器实例的作用域：

比如修改页面结构：

<body ng-controller="AuthCtrl">
  <!-- 登录表单区域 -->
  <div>
    <input ng-model="log_email" type="email" placeholder="Email">
    <input ng-model="log_password" type="password" placeholder="Password">
    <button ng-click="login()">Login</button>
  </div>
  
  <!-- header区域 -->
  <div>
    <h3>Welcome</h3>
    <span>{{first_name}}</span>
  </div>
</body>

这样登录操作和header用的是同一个AuthCtrl实例，登录成功后设置的$scope.first_name就能直接在模板里渲染了。

方案2：用服务共享用户数据（推荐） #

控制器本来就不适合存储跨组件共享的状态，Angular的服务是单例的，非常适合用来保存用户登录信息这种需要跨控制器/模板共享的数据，还能解决页面刷新后状态丢失的问题。

步骤如下：

1. 创建一个Auth服务管理用户状态：

(function() {
  "use strict";
  angular
    .module("MainModule")
    .service("AuthService", function() {
      // 初始化时从localStorage读取，防止页面刷新丢失状态
      let currentUser = JSON.parse(localStorage.getItem('currentUser')) || null;

      // 设置当前用户并持久化到localStorage
      this.setCurrentUser = function(user) {
        currentUser = user;
        localStorage.setItem('currentUser', JSON.stringify(user));
      };

      // 获取当前用户
      this.getCurrentUser = function() {
        return currentUser;
      };

      // 可选：登出方法
      this.logout = function() {
        currentUser = null;
        localStorage.removeItem('currentUser');
      };
    });
})();

2. 修改AuthCtrl，注入并使用这个服务：

(function() {
  "use strict";
  angular
    .module("MainModule")
    .controller("AuthCtrl", function ($scope, $http, AuthService) {
      // 初始化时从服务获取用户数据
      $scope.currentUser = AuthService.getCurrentUser();

      $scope.login = function () {
        var loginData = {
          email: $scope.log_email,
          password: $scope.log_password
        };
        console.log(loginData);
        $http.post('/login', loginData)
          .then(function onSuccess(response) {
            console.log(response.data.first_name);
            // 将用户数据存入服务
            AuthService.setCurrentUser(response.data);
            // 更新$scope的用户数据
            $scope.currentUser = AuthService.getCurrentUser();
          });
      };
    });
})();

3. 修改header模板，绑定服务中的用户数据：

<div ng-controller="AuthCtrl">
  <h3>Welcome</h3>
  <!-- 用ng-if判断用户是否登录，避免显示空内容 -->
  <span ng-if="currentUser">{{currentUser.first_name}}</span>
</div>

另外提个小细节：你的模板里写的是"Wellcome"，正确拼写是"Welcome"，不过这只是拼写问题不影响功能~

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