(Angularjs Metronic) Sidebar Sub Menu hiding after click and not keep open

Question

The problem is simply that after you click the sidebar, the submenu appears briefly and is hidden again.

Layout.js (slideUp func.) is triggered twice nonsense

I checked the settings in app.js and the id of the menus. I am sure that the id and sub id that I have stored in the database are working correctly. I checked that the classes on the page worked properly and placed correctly.

But there is a problem with the "open" class and its associated "display block" style. If I go to fix it and remain in the metronic layout.css, the important typing remains visible. But before it opens and closes again.

Thank you for your help.

-Metronic.factory in app.js

var settings = {
            layout: {
                pageSidebarClosed: false, // sidebar menu state
                pageBodySolid: false, // solid body color state
                pageAutoScrollOnLoad: 1000 // auto scroll to top on page load
            },
            ...
        };

-MetronicApp.controller in app.js

    MetronicApp.controller('SidebarController', 
    ['$scope', 'authService', function ($scope, authService) {    

    $scope.SelectMenu = function (id) {
        $scope.selectedMenu = id;
    }

    $scope.SelectChildMenu = function (id) {
        $scope.selectedChildMenu = id;
    }

    $scope.LoadMenus = function () {
        authService.UserMenus().then(function (response) {
                $scope.menus = response;
                Layout.initSidebar(); // init sidebar
            },
            function (error) {
                alert("Error");
            });
    };
    }]);

• Sidebar view (.html)

   <div class="page-sidebar navbar-collapse collapse"> <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}" ng-controller="SidebarController" ng-init="LoadMenus()"> <li class="start" ng:repeat="m in menus" ng-class="{'active open': m.id==selectedMenu}"> <a href={{m.menuAction}} ng-click="SelectMenu(m.id)" > <i class="icon-home"></i> <span class="title">{{m.menuText}}</span> </a> <ul class="sub-menu" style="display: none;"> <li ng:repeat="child in m.children" ng-class="{'active': child.id==selectedChildMenu}" > <a ui-sref="{{child.menuAction}}" > <i class="icon-home"></i> <span class="title">{{child.menuText}}</span> </a> </li> </ul> </li> </ul> </div> 

• layout.js (Metronic theme global script)

   if (sub.is(":visible")) { jQuery('.arrow', the).removeClass("open"); the.parent().removeClass("open"); debugger;// **This is also triggered immediately after a single click** sub.slideUp(slideSpeed, function () { if (autoScroll === true && $('body').hasClass('page-sidebar-closed') === false) { if ($('body').hasClass('page-sidebar-fixed')) { menu.slimScroll({ 'scrollTo': (the.position()).top }); } else { Metronic.scrollTo(the, slideOffeset); } } handleSidebarAndContentHeight(); }); } else if (hasSubMenu) { debugger; //first visit here normally jQuery('.arrow', the).addClass('open'); the.parent().addClass('open'); sub.slideDown(slideSpeed, function () { if (autoScroll === true && $('body').hasClass('page-sidebar-closed') === false) { if ($('body').hasClass('page-sidebar-fixed')) { menu.slimScroll({ 'scrollTo': (the.position()).top }); } else { Metronic.scrollTo(the, slideOffeset); } } handleSidebarAndContentHeight(); }); } e.preventDefault(); }); 

CSS Flow Logs (Working and not working versions)

Working version:

Broken version

Answer 1

如果其他视图具有（main.html作为我），则删除ng-controller =“ sidebarController”表达式