angular-ui-router路由备忘

最新推荐文章于 2024-05-16 14:25:28 发布

weixin_33889665

最新推荐文章于 2024-05-16 14:25:28 发布

阅读量182

点赞数

文章标签： ui python javascript ViewUI

原文链接：https://my.oschina.net/u/3101682/blog/1558799

版权

2019独角兽企业重金招聘Python工程师标准>>>

html:

首页

二级页面

</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");

               })
       }
});