angular-ui-router路由備忘

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