我在这个tableofcontent.html文件中有一个文章列表,它们都是可点击的链接。此页面正常工作,并显示所有标题的列表。当我点击链接时,它会转到正确的模板文件,但是没有任何正确的数据填充在article.html文件中。如何在articles.html页面中正确显示每个链接的数据?
tableofcontent.html
<div class="row" ng-controller="TableofContentController">
// non relevant code removed
<ul>
<li ng-repeat="article in data">
<a ui-sref="article">{{article.title}}</a>
</li>
</ul>
article.html
<div class="row" ng-controller="ArticlesController">
// non relevant code removed
<h3>{{article.title}}</h3>
<h6>Author: {{article.author}} on {{article.date}}</h6>
<p>{{article.body}}</p>
//etc
app.js
// service to retrieve and share data
articleApp.factory('Data', function ($timeout, $http) {
var articles = {
fetch: function() {
return $timeout(function() {
return $http.get('articles.json')
.then(function(response) {
return response.data;
});
}, 30);
}
}
return articles;
});
articleApp.controller('TableofContentController', function ($scope, Data) {
Data.fetch().then(function(data) {
$scope.data = data;
});
});
articleApp.controller('ArticlesController', function ($scope, Data) {
Data.fetch().then(function(data) {
$scope.data = data;
});
});
也在app.js
中// table of content state
.state('tableofcontent', {
url: '/index',
templateUrl: 'templates/tableofcontent.html'
})
// main articles page state
.state('article', {
url: '/{{article.title}}',
templateUrl: 'templates/articles.html',
controller: 'ArticlesController',
controllerAs: 'articles',
})
答案 0 :(得分:0)
这里实际上有很多问题,你想要做的是,当有人点击这些链接列表时,而不是做
<a ui-sref="article">{{article.title}}</a>
您可能想要
<a ui-sref="article({id : article.id})">{{article.title}}</a>
现在您要传递文章的ID,需要修改模块状态定义以接受此文章ID,如下所示。
.state('article', {
url: 'article/:id',
templateUrl: 'templates/articles.html',
controller: 'ArticlesController',
controllerAs: 'articles',
})
现在,当您点击文章时,您应该会看到如下所示的网络请求:article/1234
其中1234是所选文章的ID。
在此示例中,您似乎总是加载相同的article.json数据,但在与服务器交互时,您可以使用$stateParams
服务访问所选的文章ID,您可以将其注入控制器。