Question

在angularjs中显示/隐藏动态子菜单，我在js文件中添加和删除动态类。每次状态在url中更改时（即ui-sref = {{mymenu.url}}）子菜单都不可见。如果没有状态更改子菜单正常工作。任何人都可以建议。

HTML

<li ng-repeat='mymenu in menuItems' ng-click="showHideMenu($event);" >
<a class="iconsize" ui-sref={{mymenu.url}}>
<i class={{mymenu.image}}></i> <strong>{{mymenu.menuName}}</strong>
<span class="fa fa-chevron-down"></span>
</a>
<ul class="submenuHide">
    <li class="" ng-repeat='submenu in mymenu.submenu'> 
        <a>{{submenu.submenuName}}</a>
    </li>
</ul>

JS

    $scope.showHideMenu = function(event) {
    var classname = event.target.parentElement.parentElement.children[1].className;
    if(classname == 'submenuHide'){
        $(event.target.parentElement.parentElement.children[1]).removeClass('submenuHide');
        $(event.target.parentElement.parentElement.children[1]).addClass('submenuShow');
    }else if(classname == 'submenuShow'){
        $(event.target.parentElement.parentElement.children[1]).removeClass('submenuShow');
        $(event.target.parentElement.parentElement.children[1]).addClass('submenuHide');
    }
}

Answer 1

一些事情。其一，您需要确保您的菜单不在您正在使用的各个模板之外。二，使用绑定到ng模型的ng-class确保您的菜单状态包含在摘要周期中。这将为您节省jqLite和dom解析逻辑。

这是一个example plunker。

所以你的代码可能如下所示：

<body ng-controller="MainCtrl">
    <a ui-sref="hello">Hello</a>
    <a ui-sref="about">About</a>
    <button ng-click="toggleMenu()">Show / Hide Menu</button>
    <ui-view></ui-view>
    <ul ng-class="{showMenu: show, hideMenu: !show}">
        <li ng-repeat="letter in ['a','b','c','d']">{{letter}}</li>
    </ul>
</body>

有了这个JS：

app.controller('MainCtrl', function($scope) {
  $scope.show = false;
  $scope.toggleMenu = function() {
    $scope.show = !$scope.show;
  };
});

Angularjs：url中的ui-sref状态更改未显示子菜单

1 个答案: