2019獨角獸企業重金招聘Python工程師標準>>>

<script src="plugins/angular/angular.js"></script>
<script src="plugins/angular/angular-ui-router.min.js"></script>

html:

首頁

?<ol class="head-bottom-nav" nav-Li>
? ? ? ? ? ? <li ><a ui-sref="collecttotall" >數據總覽</a></li>
? ? ? ? ? ? ?<li><a ui-sref="collect-application">應用數據</a></li>
? ? ? ? ? ? ?<li><a ui-sref="repottatol.repotdata" >上報數據</a></li>
? ? ? ? ? ? ?<li><a ui-sref="exdata">外部數據</a></li>
? ? ?</ol>

二級頁面

?<div class="right-content" >
<div class="col-lg-4">
? ? ? ? ? ? <ul class=" repotnewcss-nav" secendnav-Li>
? ? ? ? ?<li class="on"><a ui-sref="repottatol.repotdata">旅游景區</a></li>
? ? ? ? ?<li><a ui-sref="repottatol.repotdata1">旅游商品</a></li>
? ? ? ? ?<li><a ui-sref="repottatol.repotdata2">旅游餐飲</a></li>
? ? ? </ul>
? ? ? ?<div ui-view="view1"></div>
? ? ? ?

</div>
<div class="col-lg-4">
? ? ? ? ? ? <ul class=" repotnewcss-nav" secendnav-Li>
? ? ? ? ?<li class="on"><a ui-sref="repottatol.repotdata">酒店客棧</a></li>
? ? ? ? ?<li><a ui-sref="repottatol.repotdata1">農家樂</a></li>
? ? ? ? ?<li><a ui-sref="repottatol.repotdata2">旅游商品</a></li>
? ? ? </ul>
? ? ? ?<div ui-view="view2"></div>
? ? ? ?

</div>
<div class="col-lg-4">
? ? ? ? ? ? <ul class=" repotnewcss-nav" secendnav-Li>
? ? ? ? ?<li class="on"><a ui-sref="repottatol.repotdata">旅行社</a></li>
? ? ? ? ?<li><a ui-sref="repottatol.repotdata1">旅游交通</a></li>
? ? ? ? ?<li><a ui-sref="repottatol.repotdata2">旅游休閑</a></li>
? ? ? </ul>
? ? ? ?<div ui-view="view3"></div>
? ? ? ?

</div>
? ??
? ? </div>

js:

?// JavaScript Document
?app.config(function($stateProvider,$urlRouterProvider) {
? ? $urlRouterProvider.otherwise('/collecttotall');
?? ?$stateProvider.state('collecttotall', {
?? ??? ?url:'/collecttotall',
? ? ? ? templateUrl:'collecttotall.html',
?? ??? ?controller: function(){
? ? ? ? ? ?setCookie("id","0");?

? ? ? ? } ??
? ? }).
? ? state('collect-application', {
?? ??? ?url:'/collect-application',
? ? ? ? templateUrl: 'collect-application.html',
?? ??? ?controller: function(){
? ? ? ? ? ? ?setCookie("id","1");?
?? ??? ??? ?
? ? ? ? } ? ??? ??? ?
? ? ??
? ? }).
?? ?state('repottatol', {
?? ??? ?url:'/repottatol',
? ? ? ? templateUrl: 'repottatol.html',
?? ??? ?controller: function($state){
? ? ? ? ? ? ?setCookie("id","2");?
?? ??? ??? ? ?$state.go('repottatol.repotdata');?
? ? ? ? } ??
? ? ??
? ? }).
?? ?state('exdata', {
?? ??? ?url:'/exdata',
? ? ? ? templateUrl: 'exdata.html',
?? ??? ?controller: function(){
? ? ? ? ? ? ?setCookie("id","3");?
? ? ? ? } ??
?? ??? ?
? ? ??
? ? }).
?? ?state('repottatol.repotdata', {
?? ??? ?views:{
?? ??? ? ?'view1':{
?? ??? ? ?url:'/repotdata',
? ? ? ? ? templateUrl:'repot1.html',
?? ??? ? ??
?? ??? ? ? },
?? ??? ? ? 'view2':{
?? ??? ? ? url:'/repotdata',
? ? ? ? ? ?templateUrl:'repot2.html',
?? ??? ? ?},
?? ??? ? ? ?'view3':{
?? ??? ? ? ?url:'/repotdata',
? ? ? ? ? ?templateUrl:'repot3.html',
?? ??? ? ?
?? ??? ? ? }}
?? ??? ? ??
? ? ??
? ? }).
?? ?state('repottatol.repotdata1', {
?? ??? ?views:{
?? ??? ? ?'view1':{
?? ??? ? ?url:'/repotdata1',
? ? ? ? ? ?templateUrl:'repot4.html',
?? ??? ? },
?? ??? ? ? 'view2':{
?? ??? ? ? url:'/repotdata1',
? ? ? ? ? ?templateUrl:'repot5.html',
?? ??? ? ? },
?? ??? ? ? ?'view3':{
?? ??? ? ? ?url:'/repotdata1',
? ? ? ? ? ?templateUrl:'repot6.html',
?? ??? ? ?}
?? ??? ? ? }
?? ??? ? ??
? ? ??
? ? }).
?? ?state('repottatol.repotdata2', {
?? ??? ?views:{
?? ??? ? ?'view1':{
?? ??? ? ?url:'/repotdata2',
? ? ? ? ? ?templateUrl:'repot7.html'},
?? ??? ? ? 'view2':{
?? ??? ? ? url:'/repotdata2',
? ? ? ? ? ?templateUrl:'repot8.html',
?? ??? ? ? },
?? ??? ? ? ?'view3':{
?? ??? ? ? ?url:'/repotdata2',
? ? ? ? ? ?templateUrl:'repot9.html',
?? ??? ? ?}
?? ??? ? ? }
?? ??? ? ??
? ? ??
? ? })
});

選中js

?/*********************導航*******************/

app.directive('navLi',['$rootScope','navServer', function($rootScope,navServer) {
?? ?return ?function($scope, element, attrs) {
?? ??? ? ? ? ? var i= getCookie("id");?
?? ??? ??? ? ? element.children().eq(i).addClass("active").siblings("li").removeClass("active");
?? ??? ??? ? ? element.children().click(function(){
?? ??? ??? ??? ? ? $(this).addClass("active").siblings("li").removeClass("active");
?? ??? ??? ??? ? ? ?})
?? ??? ?}
?? ??? ?}]);
/*******************二級導航****************/

app.directive('secendnavLi', function() {
?? ?return ?function($scope, element, attrs) {
?? ??? ? ? ? ?
?? ??? ??? ??
?? ??? ??? ? ? element.children().click(function(){
?? ??? ??? ??? ? ? $(this).addClass("on").siblings("li").removeClass("on");
?? ??? ??? ??? ? ??
?? ??? ??? ??? ? ? })
?? ??? ?}
});

? ? ? ? ? ?

轉載于:https://my.oschina.net/u/3101682/blog/1558799

總結

以上是生活随笔為你收集整理的angular-ui-router路由备忘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。