使用 github API 在点击时显示 repo 提交

Question

我正在使用 Github API 和 AngularJS，我想在单击从用户那里提取的 repo 名称时显示 repo 的提交

这是我现在拥有的 html：

<ul ng-repeat="repo in repos">
    <li><a href="{{repo.html_url}}" target="_blank"> {{repo.name}} </a></li>
</ul>

这是拉这个的函数：

function GithubController($scope, $http) {
   $scope.getInfo = function () {
     $scope.userNotFound = false;
     $scope.loaded = false;

     $http.get("https://api.github.com/users/" + $scope.username)
           .success(function (data) {
              if (data.name == "") data.name = data.login;
              $scope.user = data;
              $scope.loaded = true;
           })
           .error(function () {
              $scope.userNotFound = true;
           });
     $http.get("https://api.github.com/users/" + $scope.username + "/repos").success(function (data) {
        $scope.repos = data;
        $scope.reposFound = data.length > 0;
     });
  }
}

我知道我可能需要使用 Jquery 在单击 li 元素时填充 DOM，但我不确定从哪里开始。

这里是 Github API 提交页面的链接： https://developer.github.com/v3/repos/commits/

Answer 1

一旦你有了仓库，你就可以得到这样的提交：

$scope.getCommits = function(repo) {
  $http.get("https://api.github.com/repositories/" + repo.id + "/commits").success(function(data) {
    repo.commits = data;
  })
}

您不需要 jQuery 来显示它们。下面是一个快速示例，说明如何使用嵌套的ng-repeat 列出它们：

<ul ng-repeat="repo in repos">
  <li>
    <div>
      <a ng-click="getCommits(repo)"> {{repo.name}} </a>
      <div class="well">{{repo.name}}
        <ul>
          <li ng-repeat="commit in repo.commits">
            <div><pre>{{commit | json}}</pre></div>        
          </li>
        </ul>
      </div>
    </div
  </li>
</ul>

这是一个工作演示：http://plnkr.co/eWDT8xsssv5ofQJ8YjiJ

注意 - 一些请​​求会产生 409 (Conflict) 响应。我不确定为什么。有些存储库只有一个提交。所以你可能需要点击几个才能找到一个有多个提交的。