javascript - 如何使用angular js在母版页中设置事件菜单

Question

我想在不同页面的母版页中设置事件菜单。

我正在使用一页的侧边栏、一页的页眉和一页的页脚。

所有三个页面合并在一起。

我在 Angular 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 来包含 UI。

在那之后我尝试像这样设置菜单事件

Controller =SlideController1

MainMenuActive="active open"
ActiveRole="active"

Controller =SlideController2

MainMenuActive="active open"
ActiveUser="active"

Controller =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>

这里我无法添加三个 Controller 。

现在我想通过选定的 UI 将菜单设置为事件状态，如何在 Angular 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>