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

【问题标题】：Angularjs : ui-sref state change in url not showing submenuAngularjs：url中的ui-sref状态更改未显示子菜单
【发布时间】：2016-11-10 22:02:23
【问题描述】：

在 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>

    $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');
    }
}

【问题讨论】：

标签： angularjs uiview state show-hide ui-sref

【解决方案1】：

几件事。一，您需要确保您的菜单在您正在使用的各个模板之外。第二，使用绑定到 ng-model 的 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;
  };
});

【讨论】：