Question

我正在尝试学习AngularJS并开始我的第一个代码示例来获取用户的github回购。

我的html页面是这样的：

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <link  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="gitHubRepoController">
    {{error}}
    <table class="table table-striped">
      <thead>
        <tr>
        <th>Name</th>
        <th>Full Name</th>
        <th>HTML Url</th>
        <th>Description</th>
        </tr>
        </thead>
      <tbody>
        <tr ng-repeat="repo in repos">
          <td>{{repo.name}}</td>
          <td>{{repo.full_name}}</td>
          <td>{{repo.html_url}}</td>
          <td>{{repo.description}}</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

我的控制器是这样的

(function() {
  var app = angular.module("githubViewer",[]);

  var gitHubRepoController = function($scope, $http){
    $http.get("https://api.github.com/users/lakshman553/repos")
         .then(onDataDownloaded, onError);

  var onDataDownloaded = function(response) {
    console.log(response.data);
    $scope.repos = response.data;

  };
  $scope.error = "some value";
  var onError = function(reason) {
    $scope.error = reason;
  };
  };

  app.controller("gitHubRepoController",gitHubRepoController);
})();

AngularJS已加载，因为它显示{{error}}在屏幕上显示为some value

正确加载表头但未显示任何其他内容。当在broswer中看到时，甚至网址都会返回数据。

控制台中也没有错误。

我哪里错了？

Answer 1

在尝试使用它们之前，您需要将声明处理程序（onDataDownloaded，onErro）的声明移动到其中。 Plnkr

(function() {
  console.log('this is the app')
  var app = angular.module("githubViewer",[]);

  var gitHubRepoController = function($scope, $http){  
    var onDataDownloaded = function(response) {
      $scope.repos = response.data;
    };
    var onError = function(reason) {
      $scope.error = reason;
    };
    $http.get("https://api.github.com/users/lakshman553/repos")
    .then(onDataDownloaded, onError);
  };

  app.controller("gitHubRepoController",gitHubRepoController);
})();

Answer 2

问题在于您的控制器。

您的HTML：

<body ng-controller="CustomersController">
    {{error}}
    <table class="table table-striped">
      <thead>
        <tr>
        <th>Name</th>
        <th>Full Name</th>
        <th>HTML Url</th>
        <th>Description</th>
        </tr>
        </thead>
      <tbody>
        <tr ng-repeat="repo in repos">
          <td>{{repo.name}}</td>
          <td>{{repo.full_name}}</td>
          <td>{{repo.html_url}}</td>
          <td>{{repo.description}}</td>
        </tr>
      </tbody>
    </table>
  </body>

HTML应该是：

<body ng-controller="gitHubRepoController">
{{error}}
<table class="table table-striped">
    <thead>
    <tr>
        <th>Name</th>
        <th>Full Name</th>
        <th>HTML Url</th>
        <th>Description</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="repo in repos">
        <td>{{repo.name}}</td>
        <td>{{repo.full_name}}</td>
        <td>{{repo.html_url}}</td>
        <td>{{repo.description}}</td>
    </tr>
    </tbody>
</table>
</body>

JS：

(function() {
    var app = angular.module("githubViewer",[]);

    var gitHubRepoController = function($scope, $http){

        var onDataDownloaded = function(response) {
            console.log(response.data);
            $scope.repos = response.data;
        };

        $scope.error = "some value";

        var onError = function(reason) {
            $scope.error = reason;
        };

        $http.get("https://api.github.com/users/lakshman553/repos")
            .then(onDataDownloaded, onError);
    };

    app.controller("gitHubRepoController",gitHubRepoController);
})();

您已将控制器设为ng-controller="CustomersController"，这是错误的。如果您检查了控制台，它会清楚地显示错误。

希望这会对你有所帮助。

ng-repeat不显示行

2 个答案: