2017-04-21 53 views
0

我想在不同頁面的主頁面中設置活動菜單。如何使用角度js在主頁面中設置活動菜單

我使用一個頁面的邊欄,一頁的頁眉和一頁的頁腳。

所有這三個頁面被組合。

我在角度js中使用了10個UI。當我移動到不同的用戶界面時,我想設置活動只有選定的用戶界面。

我使用這個jQuery

$("#sidebar").load("slidebar.html", function() { 
       $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active"); 
       $("#ManageUserID").addClass("active").parents(".nav li").addClass("active open"); 
      }); 

,這是很好的工作之前。

現在我打算根據用戶視圖和編輯權限隱藏UI(UI隱藏),現在我正在使用ng-include來包含用戶界面。

之後,我想設置菜單主動這樣

控制器= SlideController1

MainMenuActive="active open" 
ActiveRole="active" 

控制器= SlideController2

MainMenuActive="active open" 
ActiveUser="active" 

控制器= SlideController3

MainMenuActive="active open" 
ActiveFacility="active" 





<li ng-controller="SlideController1 || SlideController2 || SlideController3" class={{MainMenuActive}} > 
      <a href="#" class="dropdown-toggle"> 
       <i class="menu-icon fa fa-desktop"></i> 
       <span class="menu-text"> 
        Security 
       </span> 
       <b class="arrow fa fa-angle-down"></b> 
      </a> 
      <b class="arrow"></b> 
      <ul class="submenu"> 
       <li class={{ActiveRole}} ng-model="ManageRole" id="ManageRoleID" > 
        <a href="ManageRole.html"> 
         <i class="menu-icon fa fa-caret-right"></i> 
         Manage Role 
        </a> 
        <b class="arrow"></b> 
       </li> 
       <li class={{ActiveUser} id="ManageUserID"> 
        <a href="manageuser.html"> 
         <i class="menu-icon fa fa-caret-right"></i> 
         Manage User 
        </a> 
        <b class="arrow"></b> 
       </li> 
       <li class={{ActiveFacility}} id="ManageFacilityID"> 
        <a href="ManageFacility.html"> 
         <i class="menu-icon fa fa-caret-right"></i> 
         Manage Facility 
        </a> 
        <b class="arrow"></b> 
       </li> 
      </ul> 
     </li> 

在這裏我不能夠添加三個控制器。

現在我想設置活動的選定用戶界面如何在角JS中做的菜單。

回答

0

,而不是舊腳本

<script> 
$(function() { 

     $(".sidebar ul li ul li").closest("li").find(".active").removeClass("active"); 
     $("#ManageUnitID").addClass("active").parents(".nav li").addClass("active open"); 

}); 
    </script>