如何使用Angular JS将菜单设置为活动页面

Question

我想在不同页面的母版页中将菜单设置为活动状态。

我从一页使用侧边栏，从一页使用页眉，从一页使用页脚。

这三个页面全部合并在一起。

我在angular js中使用10个UI。 当我移到其他UI时，我只想将选定的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隐藏）隐藏用户界面，因此现在我使用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中进行操作。

Answer 1

而不是旧的脚本

    <script>
 $(function () {

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

});
    </script>