如何在HTML中输出AngularJS的$scope.data数据？

嘿，我来帮你梳理下这个问题里的几个关键点，一步步搞定它：

1. 先修正$http响应的数据获取逻辑 #

你在$http.post的回调里直接把data赋值给$scope.data，但AngularJS的$http返回的是一个包含多个属性的响应对象，后端真正返回的业务数据其实在response.data里（第一个response是框架封装的响应容器，第二个data才是你要的真实数据）。所以回调代码得改成这样：

$http.post(url, data, config).then(function(response) {
    console.log(response.data); // 这里才是后端返回的真实数据
    $scope.data = response.data;
})

2. 页面跳转时机错误会导致数据丢失 #

你现在的代码是先执行$location.url('/page/profile')跳转页面，然后才发送POST请求。这会直接导致当前控制器被销毁，后续POST请求回调里给$scope.data赋值完全没用——因为这个$scope已经不存在了！

必须把跳转逻辑放到POST请求成功的回调里，等数据拿到手后再跳转：

$http.post(url, data, config).then(function(response) {
    console.log(response.data);
    $scope.data = response.data;
    // 等数据获取完成后再跳转到目标页面
    $location.url('/page/profile');
})

3. 跨控制器传递数据的核心问题 #

如果/page/profile页面的ProfileController是一个全新的控制器实例，那当前控制器的$scope.data是无法直接传递过去的。这时候你需要用以下几种方式之一来共享数据：

方式一：使用自定义共享服务（推荐） #

创建一个专门的服务来存储数据，不同控制器都能通过注入这个服务访问数据：

// 定义共享数据服务
app.service('UserDataService', function() {
    this.storedData = null;
    this.setData = function(data) {
        this.storedData = data;
    };
    this.getData = function() {
        return this.storedData;
    };
});

// 在发起请求的控制器里注入服务并存储数据
app.controller('OriginalController', function($scope, $location, $http, UserDataService) {
    $scope.getdata=function(val){ 
        var url = "example.com"; 
        var data= this.user; 
        var config = { 
            headers : { 
                'Content-Type': 'application/json;', 
                'x-api-key': '123456' 
            } 
        } 
        $http.post(url, data, config).then(function(response) { 
            console.log(response.data); 
            UserDataService.setData(response.data); // 把数据存到服务里
            $location.url('/page/profile'); 
        }) 
    };
});

// 在ProfileController里注入服务获取数据
app.controller('ProfileController', function($scope, UserDataService) {
    $scope.data = UserDataService.getData(); // 从服务拿到数据
});

方式二：使用$rootScope（简单但不推荐，易造成全局污染） #

// 发起请求的控制器里
$http.post(url, data, config).then(function(response) {
    $rootScope.userData = response.data;
    $location.url('/page/profile');
})

// ProfileController里
$scope.data = $rootScope.userData;

方式三：使用localStorage（适合需要持久化的数据） #

// 发起请求的控制器里
$http.post(url, data, config).then(function(response) {
    localStorage.setItem('profileData', JSON.stringify(response.data));
    $location.url('/page/profile');
})

// ProfileController里
$scope.data = JSON.parse(localStorage.getItem('profileData'));

4. HTML中正确绑定数据字段 #

你现在的HTML里直接写{{ data }}，会把整个对象的结构打印出来。如果要显示电话号码，需要绑定数据对象里对应的字段，比如后端返回的数据里有phone字段，就改成：

<p class="size-h4">{{ data.phone }}</p>

要是不确定返回数据的具体结构，可以先在HTML里用{{ data | json }}打印整个对象的JSON结构，方便你查看字段：

<p>{{ data | json }}</p>

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