angular方法中的$ http.get方法无法按预期工作

时间:2016-11-15 10:23:17

标签: javascript angularjs

这是我的HTML代码。

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/angular.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-controller="MainController">
    Name: {{user.login}}   
</body>
</html>

这是我的JavaScript代码。

var MainController = function($scope, $http) {
    var onUserComplete = function(response) {
        $scope.user = response.data;
    };

    $http.get("https://api.github.com/users/sfshameem5")
    .then(onUserComplete);

    $scope.message = "Hello, Angular!";
}

我希望{{user.login}}显示一个名字,但这并不会出现。

2 个答案:

答案 0 :(得分:0)

使用$ http获取

$http({
   method:"get",
   url:"https://api.github.com/users/sfshameem5"
   }).success(function(resp){
      $scope.user=resp.data
   }).error(function(error){
      console.log(error)
   })

答案 1 :(得分:0)

下面。这将有效: 你应该这样做:

$scope.user = response;

而不是

$scope.user = response.data;

下面的代码正在运作。

HTML:

 <!DOCTYPE html>
    <html ng-app="app">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <script src="https://code.angularjs.org/angular-1.0.1.js"></script>
    </head>
    <body ng-controller="MainController">
        Name: {{user.login}}
    </body>
    </html>

对于你的js:

var app = angular.module('app', []);
app.controller('MainController', function($scope, $http) {
    $http({
        method: "GET",
        url: "https://api.github.com/users/sfshameem5",
    })
            .success(function(response) {
                $scope.user = response;
             })
            .error(function(response) {
                console.log("Failed fetching data:" + response);
            });
});