目录
[ionic开源项目教程] 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
[ionic开源项目教程] 第10讲 新闻详情页的用户体验优化
- [ionic开源项目教程] 第11讲 封装BaseController实现controller继承
- [ionic开源项目教程] 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装
- [ionic开源项目教程] 第13讲 Service层继续优化，提取公用Service，以及生活和农业两大模块的实现
[效果图]
步骤如下：
1.在app.js中配置新闻详情页的路由
.state('tab.tab1-details', {
url: '/tab/tab1-details/:id/:title',
views: {
'tab1': {
templateUrl: 'templates/tab1-details.html',
controller: 'Tab1DetailsCtrl'
}
}
})
2.新建新闻详情页的视图tab1-details.html
<ion-view title="{{title}}">
<ion-content class="padding">
<div ng-bind-html="item.message"></div>
</ion-content>
</ion-view>
3.在tab1.html中添加ng-click跳转事件goDetails
<a ng-repeat="item in slide.items" class="item item-thumbnail-right item-text-wrap" ng-click="goDetails(item)">
<img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
<h3>{{::item.title}}</h3>
<p>{{::item.description | substring:item.description}}</p>
</a>
4.在Tab1Ctrl中实现goDetails
$scope.goDetails = function (item) {
$state.go('tab.tab1-details', { id: item.id,title:item.title })
}
5.在Tab1Service中实现getDetails获取新闻详情
this.getDetails = function (id) {
return $http.get(urls.info_show + id);
}
6.配置config.js中的服务器url
var server = {
domain : "http://www.tngou.net/api",
imgUrl : "http://tnfs.tngou.net/image"
}
var urls = {
info_show:server.domain+"/info/show?id="
}
var settings = {
rows : 10
}
var cache = {
user: "TongeNews"
}
7.新建Tab1DetailsCtrl控制器，调用Tab1Service中的getDetails获取新闻详情，并显示到view层。
.controller('Tab1DetailsCtrl', function ($scope, $stateParams, Tab1Service) {
var id = $stateParams.id;
$scope.title = $stateParams.title;
Tab1Service.getDetails(id).success(function (response) {
$scope.item = response;
})
})
到这里如果有任何问题，请通过文章最下面的联系方式联系我。