Добавить/удалить класс CSS при изменении маршрута в Angularjs

Я не уверен, как это можно достичь в Angular. Я хочу добавить и удалить класс CSS при изменении маршрута. Я пытаюсь показать и скрыть вертикальное меню. В настоящее время я использую ui-route. Любое предложение или ссылка на пример будет оценен или любое другое предложение о другом подходе к моей проблеме также приветствуетсяДобавить/удалить класс CSS при изменении маршрута в Angularjs

источник

2014-11-09 GeekOnGadgets

Вы можете зарегистрировать маршрут изменена и добавить CSS в свой DOM:

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) { 
    // Add your logic, for instance: 
    $('body').addClass('hide-menu'); 
});

Очевидно есть события, поднятые до того, как маршрут был изменен: «$ locationChangeStart», here.
/Редактировать/- Лучший подход
Кроме того, я бы предпочел, используя атрибут нг-класса и простой привязки определенного значения из основного контроллера к нему.

app.controller('MainController', function ($scope) { 
    $scope.toggleMenu = function(isToShow) { 
     $scope.isVisibleMenu = isToShow == true; 
    }; 
});

затем в вашем HTML: (. Вы можете явно добавить анимацию или любую другую вещь, чтобы переключить это меню)

<!-- Menu toggle button--> 
<button ng-click="toggleMenu()"></button> 

<div class="toggleable-menu" ng-class="{'visible-menu': isVisibleMenu}"> 
<!-- The menu content--> 
</div>

и простейшего CSS possbile

.toggelable-menu { 
    display: none; 
} 

.toggelable-menu.visible-menu { 
    display: block; 
}

источник

2014-11-09 06:50:12 Tomer

Почему вниз голосов? – Tomer

Я бы, как правило, не обращал внимания на практики, описанные в этом подходе. Вы используете угловой, вы не должны использовать jquery, чтобы запутаться с классами тега body. Во-вторых, беспорядок с таким тегом DOM верхнего уровня является излишним для простого контроля видимости навигации. В-третьих, ответ не касается переключения на основе состояния, у вас есть кнопка, которая переключает класс. И хотя класс может быть использован, он снова потенциально избыточный, поскольку ng-show или ng-if будет достаточным, но, несмотря на любой случай, вы не упоминаете $ state-based проверки. – ProLoser

Самый простой и наиболее эффективный способ:

angular.module(...).run(function($rootScope, $state) { 
    $rootScope.$state = $state; 
}); 

<div ng-if="$state.contains('someState')">...</div>

Это приведет к удалению DOM, который улучшит производительность, если в меню много привязок.

Однако, я постоянно говорю людям, чтобы рассмотреть используя именованные виды для навигации:

<body> 
    <nav ui-view="nav"></nav> 
    <div class="container" ui-view></div> 
</body> 

$stateProvider.state('home', { 
    views: { 
    '[email protected]': { 
     templateUrl: 'nav.html' 
    } 
    '': { 
     // normal templateUrl and controller goes here. 
    } 
    } 
});

Прохладная часть о том, что дети государства могут переопределить и контролировать то, что Nav файл использовать, а может даже настройки рассасывается и контроллеры, которые обмениваются данными между навигатором и контентом. Никаких директив/услуг не требуется!

Наконец, вы можете сделать это слишком:

<nav ng-show="$state.contains('somestate')"></nav> 
<nav ng-class="{someClass:$state.contains('somestate')}"></nav>

В качестве альтернативы фотографии ui-sref-active

Все мои предложения, прежде всего, предположим, что вы используете UI-маршрутизатор, так как это самый лучший!

источник

2014-11-09 07:59:51 ProLoser

Мне нравится этот подход по глобализации '$ state'. –

Отличный ответ :) Можете ли вы создать Plunker для лучшего понимания? благодаря – GeekOnGadgets

Попробуйте это:

app.run(function ($rootScope) { 
    $rootScope.$on("$stateChangeStart", function(event, toState, fromState){ 

    if (toState.url === "/path") { 
     $('div').addClass('className'); 
    } else { 
     $('div').removeClass('className'); 
    } 

    }); 
});

источник

2015-07-31 14:23:53

Добавить/удалить класс CSS при изменении маршрута в Angularjs

ответ

Смежные вопросы