2017-01-30 9 views
2

ユーザー名に基づいてGithubユーザーを検索し、reposのリストを表示する角度アプリを作成しようとしています。 次に、ユーザーが任意のリポジトリ名をクリックすると、開いている問題と寄稿者のリストが表示されます。 ここplunk http://plnkr.co/edit/6ZzIkB7W1HgxQtuQjo5k?p=preview角度アプリケーションでページを表示して再起動しない

がplunkを訪問し、アプリのテストランを作成してくださいだ、私は私の問題を説明することはできないんだけど、正しく

私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ページの任意のレポ名をクリックすると、アプリケーションは再びメインページを再読み込みし、最後のステージすなわちでトラブルに遭遇しています。 私を助けてもらえますか? :)

答えて

2

ためのコードの下ng-repeat="repo in repos | orderBy:repoSort"ショーであるアンカーリンクから#を削除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

ちょうどあなたのサイトの既定のURLは、#を使用してリンクをchengeする必要が http://localhost/#!/mainのような!/のようですので、詳細は

<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> 
関連する問題