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



我正在尝试构建一个angular应用程序,该应用程序根据Github用户的用户名搜索用户,并显示他们的转发列表。接下来,当用户单击任何回购名称时,它应该显示未解决问题和贡献者的列表。砰的一声http://plnkr.co/edit/6ZzIkB7W1HgxQtuQjo5k?p=preview

请访问plunk并在应用程序上进行测试,我无法正确解释我的问题

我的报告控制器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名称而不是加载repo.html页面时,应用程序会再次重新加载主页。你能帮我吗?:)

由于您的网站的默认url类似于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>

只需从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>

相关内容

最新更新