[ionic开源项目教程]

[ionic开源项目教程] 第5讲如何在项目中使用全局配置
[ionic开源项目教程] 第6讲过滤器filter的使用
[ionic开源项目教程] 第7讲实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
[ionic开源项目教程] 第8讲根据菜单分类加载数据(重要)
[ionic开源项目教程] 第9讲新闻详情页的实现[ionic开源项目教程]
[ionic开源项目教程] 第10讲新闻详情页的用户体验优化
[ionic开源项目教程] 第11讲封装BaseController实现controller继承
[ionic开源项目教程] 第12讲医疗模块的实现以及Service层loadMore和doRefresh的提取封装
[ionic开源项目教程] 第13讲 Service层继续优化，提取公用Service，以及生活和农业两大模块的实现

[效果图]

[ionic开源项目教程]

步骤如下：

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;
        })
    })

到这里如果有任何问题，请通过文章最下面的联系方式联系我。

秒客网

[ionic开源项目教程]

目录

相关文章