angular router ui 路由模組(父子)層級說明
阿新 • • 發佈:2018-12-30
路由配置頁面
/***************** 英雄榜 ************************/ //英雄榜模板 .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>