angular router ui 路由模块（父子）层级说明

 

路由配置页面

/***************** 英雄榜 ************************/
//英雄榜模板
.state('heroTopList', {
	url: '/heroTopList',
	abstract:true,
	templateUrl: 'templates/heroTopIndex.html',
	//进入页面触发的方法
	onEnter: function () {
	},
	//离开页面触发的方法
	onExit: function () {
	},
	controller: ["$scope", "$state", function ($scope, $state) {
		$scope.tabChange = function(myevent){
			var currentObj = $(myevent.target);
			currentObj.closest(".yingxiongbang").find("a.button").removeClass("active");
			currentObj.addClass("active");
		};
	}]
})
//top10店铺
.state('heroTopList.topShop', {
	url: '/heroTopList/topShop',
	templateUrl: 'templates/heroTopIndex_topShop.html',
	//进入页面触发的方法
	onEnter: function () {
	},
	//离开页面触发的方法
	onExit: function () {
	},
	controller: ["$scope", "$state", function ($scope, $state) {

	}]
})
//top10超级会员
.state('heroTopList.topSuperMember', {
	url: '/heroTopList/topSuperMember',
	templateUrl: 'templates/heroTopIndex_topSuperMember.html',
	//进入页面触发的方法
	onEnter: function () {
	},
	//离开页面触发的方法
	onExit: function () {
	},
	controller: ["$scope", "$state", function ($scope, $state) {

	}]
})
//top10 会员
.state('heroTopList.topMember', {
	url: '/heroTopList/topMember',
	templateUrl: 'templates/heroTopIndex_topMember.html',
	//进入页面触发的方法
	onEnter: function () {
	},
	//离开页面触发的方法
	onExit: function () {
	},
	controller: ["$scope", "$state", function ($scope, $state) {

	}]
})

 

 

heroTopIndex.html 模板页面内容

<ion-header-bar align-title="center">
     <div class="buttons">
         <a class="button button-clear" ui-sref="index">
            <span class="icon ion-ios-arrow-left"></span>
         </a>
     </div>
     <h1 class="title">
         英雄榜
     </h1>
</ion-header-bar>
<style>
    .yingxiongbang a.active{
        background-color: #000;
        color: #fff;
    }
</style>
<ion-content class="">
    <div class="button-bar yingxiongbang">
        <a class="button bg_e3e2e2 active" ui-sref="heroTopList.topShop" ng-click="tabChange($event)">前十店铺</a>
        <a class="button bg_e3e2e2" ui-sref="heroTopList.topMember" ng-click="tabChange($event)">前十会员</a>
        <a class="button bg_e3e2e2" ui-sref="heroTopList.topSuperMember" ng-click="tabChange($event)">前十超级会员</a>
    </div>
    <div ui-view></div>
</ion-content>

 

 

heroTopIndex_topMember.html 页面内容

<style>
    .list .item.item-avatar{
        min-height: 70px;
        padding-top:14px;
        padding-bottom: 14px;
    }
</style>

<div class="list">
    <div class="item item-avatar">
        <img src="public/image/touxiang.png">
        <div class="line_height_35px font_16">
            <div class="float_left">一路飞行</div>
            <div class="float_right">￥222222.22</div>
            <div class="clear_both"></div>
        </div>
    </div>

    <div class="item item-avatar">
        <img src="public/image/touxiang.png">
        <div class="line_height_35px font_16">
            <div class="float_left">一路飞行</div>
            <div class="float_right">￥222222.22</div>
            <div class="clear_both"></div>
        </div>
    </div>
</div>