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

来源：互联网发布：淘宝如何查购买记录编辑：程序博客网时间：2024/05/19 03:29

路由配置页面

/***************** 英雄榜 ************************///英雄榜模板.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>

0 0