javascript - AngularJS 不显示 $scope

Question

我知道这个问题已经得到解答，但给出的解决方案对我不起作用。一切看起来都不错，但大括号之间的内容没有显示在屏幕上。

    <div ng-controller="Hello">
        <p>The ID is {{greeting.ip}}</p>
        <p>The content is {{greeting.ip}}</p>
    </div>

Controller 如下:

 'use strict';
angular.module('sbAdminApp')
    .controller('Hello',['$scope','$http', function ($scope, $http) {

$http.get('http://ip.jsontest.com/')
    .then(function (data) {
            $scope.greeting = data;
    console.log($scope.greeting);
        });
    }]);

在我的 app.js 中，我声明了这一点:

       .state('dashboard.test', {
            templateUrl: 'views/test.html',
            url: '/test',
            controller: 'Hello',
            resolve: {
                loadMyFiles: function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'sbAdminApp',
                        files: ['scripts/controllers/helloWorld.js']
                    })
                }
            }
        })

我获取数据的 JSON URL 是 this.

这是控制台输出的图片:

Answer 1

$scope.greeting = data; 这行是错误的。

应该是$scope.greeting = data.data;

编辑:

因为您要将服务器的响应分配给该变量，并且您只需要从 API 调用返回的数据。您的响应对象包含 header 和状态代码等内容以及 data 属性，该属性实际上包含您需要的数据，例如 id 等内容。如果您想从响应对象中获取id，您可以这样做:greeting.data.id。

我总是将我的 response 变量命名为 res 或 response，以免搞砸。像这样:

$http.get('http://ip.jsontest.com/')
    .then(function (res) {
            $scope.greeting = res.data;
            console.log($scope.greeting);
        });
    }]);