Question

我正在尝试构建一个角度应用程序，根据用户名搜索Github用户并显示其回购列表。接下来，当用户点击任何回购名称时，它应显示未解决的问题和贡献者列表。这里是plunk http://plnkr.co/edit/6ZzIkB7W1HgxQtuQjo5k?p=preview

请访问插件并在应用上进行测试，我无法正确解释我的问题

我的repocontroller js。

(function(){

var app = angular.module('plunker');
app.controller('RepoCtrl', function($scope, $routeParams, $http, $log){
    var username = $routeParams.username;
    var reponame = $routeParams.reponame;



    var onSuccess = function(response){
      $scope.repo = response.data;
      $http.get($scope.repo.contributors_url)
      .then(onCollab , onError);
    };

    var onCollab = function(response){
        $scope.contributors = response.data;
    };

    var onError = function(reason){
    $scope.error = "Data Load Error";
    };

    //GET https://api.github.com/repos/:owner/:repo/contributors
    $http.get('https://api.github.com/repos/' + 'username/' + 'reponame')
    .then(onSuccess, onError);
});

}());

我在最后阶段遇到了麻烦，即当用户点击任何仓库名称而不是加载repo.html页面时，应用程序会再次重新加载主页面。你能帮帮我吗？ :)

Answer 1

只需从锚点链接中删除#，该链接位于ng-repeat="repo in repos | orderBy:repoSort"下方代码中以获取更多信息

<div>
  <h2>{{error}}</h2>
  <h1>{{user.name}}</h1>
  <a href="{{user.blog}}" target=_blank>{{user.blog}}</a>
  <h1>{{user.email}}</h1>
  <h1>{{user.location}}</h1>
  <img ng-src="{{user.avatar_url}}" title={{user.name}} width="250px" id="userDetails"> OrderBy:
  <select ng-model="repoSort">
    <option value="-stargazers_count">Stars</option>
    <option value="name">Name (A-Z)</option>
    <option value="-name">Name (Z-A)</option>
  </select>

</div>



<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Stars</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="repo in repos | orderBy:repoSort">
      <td>
        <a href="/repo/{{user.login}}/{{repo.name}}">{{repo.name}}</a>
      </td>
      <td>{{repo.stargazers_count | number}}</td>
      <td>{{repo.language}}</td>
    </tr>
  </tbody>
</table>

<a href='#/main'>Back To Main</a>

Answer 2

由于您网站的默认网址与http://localhost/#!/main相同你必须用＃！/喜欢在user.html

中改变你的链接

<a href="#!/repo/{{user.login}}/{{repo.name}}">{{repo.name}}</a>

和repo.html

<a href="#!/main">Back To Main</a>
<a href="#!/user/{{repo.owner.login}}">Back To {{repo.owner.login}}</a>

角度应用程序没有将页面加载到视图中并重新启动自身

2 个答案: