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