Javascript AngularJS HTTP Get JSON将不显示_Javascript_Json_Angularjs

Javascript AngularJS HTTP Get JSON将不显示

javascript json angularjs

Javascript AngularJS HTTP Get JSON将不显示,javascript,json,angularjs,Javascript,Json,Angularjs,我正在努力学习AngularJS，整个晚上都在为这个问题困惑。尝试从随机生成器加载JSON数据，并在带有服务的视图中显示它。{{main.title}}可以工作，但在main.users和{{user.name}中ng repeat=user不显示任何内容。我哪里出错了 Index.html <html> <head lang="en"> <meta charset="UTF-8"> <title>AngularJS Tutoria

我正在努力学习AngularJS，整个晚上都在为这个问题困惑。尝试从随机生成器加载JSON数据，并在带有服务的视图中显示它。{{main.title}}可以工作，但在main.users和{{user.name}中ng repeat=user不显示任何内容。我哪里出错了

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>

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';
}]);

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

        users.get().success(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;
            })
        }
    }
}]);

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

一旦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);
            })
        }
    }
}]);

演示：

一旦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);
            })
        }
    }
}]);

演示：

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

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';
}]);

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

        users.get().success(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;
            })
        }
    }
}]);

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

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

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';
}]);

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

        users.get().success(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;
            })
        }
    }
}]);

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

有两种方法可以恢复对ajax响应中返回的数据的控制。要么传递您自己的回调函数，以便在接收到数据后调用，要么在返回$http.get…）后在成功回调中执行任何您想要的操作。。。；每次进行ajax调用时。

有两种方法可以恢复对ajax响应中返回的数据的控制。要么传递您自己的回调函数，以便在接收到数据后调用，要么在返回$http.get…）后在成功回调中执行任何您想要的操作。。。；每次你进行ajax调用时。

我喜欢假装他们从未将这些成功和错误回调添加到执行此操作的$http Promise中。我仍然在试图把我的脑袋绕到整个回调的事情上，我喜欢假装他们从来没有把那些成功和错误的回调添加到完成它的$http Promise中。我仍然在想整个回调的事情。我想你需要调用你的方法users.get方法，这样vm.users就被初始化并具有所需的值。successcallback应该会解决这个问题。我想你需要调用你的方法users.get方法，因此vm.users被初始化并具有所需的值。successcallback应该对其进行排序