Question

我正在努力学习AngularJS，整晚都对这个问题感到困惑。尝试从随机生成器加载JSON数据并使用服务在视图中显示它。 {{main.title}}有效，但ng-repeat =“main.users中的用户”，{{user.name}}不显示任何内容。我哪里出错？

的index.html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
    <script src="users.serv.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class = "container">
    <h1>{{ main.title }}</h1>
    <div ng-repeat="user in main.users">
        <h2>{{ user.name }}</h2>
    </div>
</div>
</body>
</html>

app.js

angular.module('app', []);

main.ctrl.js

angular.module('app').controller('MainController', ['users', function(users) {
    var vm = this;
    users.get(function(data) {
        vm.users = data;
    });
    vm.title = 'Hello World';
}]);

users.serv.js

angular.module('app').factory('users', ['$http', function($http) {
    return {
        get: function (callback) {
            $http.get('http://www.json-generator.com/api/json/get/bJHFVOzrzC?indent=2').success(function(data) {
                return data;
            })
        }
    }
}]);

Answer 1

一旦ajax请求结束，您需要调用回调

angular.module('app').factory('users', ['$http', function ($http) {
    return {
        get: function (callback) {
            $http.get('http://www.json-generator.com/api/json/get/bJHFVOzrzC?indent=2').success(function (data) {
                callback(data);
            })
        }
    }
}]);

演示：Fiddle

Answer 2

Arun很好的回答，我更喜欢的另一种方法是，从工厂返回http方法，然后在控制器中使用成功或错误或承诺，如下所示。

main.ctrl.js

rproj="${entry%%,*}"
rhash="${entry##*,}"

users.serv.js

 angular.module('app').controller('MainController', ['users', function(users) {
        var vm = this;

        users.get().success(function (data) {       
        vm.users = data;   
       });

    vm.title = 'Hello World';
}]);

Answer 3

有两种方法可以恢复对ajax响应中返回的数据的控制。传递自己的回调函数，以便稍后在收到数据时调用，或者在返回$ http.get（...）后在成功回调中执行任何操作。每次你去阿贾克斯电话。

AngularJS HTTP Get JSON将不会显示

3 个答案: