Angularjs: изменение состояния ui-sref в URL не показывает подменю

Question

Angularjs: изменение состояния ui-sref в URL не показывает подменю

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

0

angularjs uiview state show-hide ui-sref

Источник

user6681505 10 ноя '16 в 13:27

1 ответ

Другие вопросы по тегам angularjs uiview state show-hide ui-sref

user4035089 10 ноя '16 в 14:02 2016-11-10 14:02 · Answer 1 · 2016-11-10 14:02

Пара вещей. Во-первых, вам нужно убедиться, что ваше меню находится за пределами отдельных шаблонов, с которыми вы работаете. Во-вторых, использование ng-класса, привязанного к ng-модели, гарантирует, что ваше меню будет включено в цикл дайджеста. Это спасет вас от логики разбора jqLite и dom.

Вот пример плунжера.

Так что ваш код может выглядеть так:

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