AngularJs: Скрыть элемент навигации по маршруту?

Я пытаюсь выяснить, как показать или скрыть элемент в моем навигаторе на основе маршрута или отображаемое текущее представление. Например, у меня есть базовая/расширенная кнопка переключения, которую я помещаю в навигационную панель (Bootstrap 3), когда пользователь находится в форме поиска. Но когда они находятся в другом месте приложения, кнопка переключения должна быть скрыта.

В терминах DOM это просто элемент списка, который создает навигацию. Я не уверен, следует ли показывать или скрывать на основе глобального значения, которое устанавливается на каждом представлении, или я могу просто использовать имя маршрута или представления. Если да, то как это работает?

Спасибо!

Ответы

Ответ 1

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

$scope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

(В приведенном выше коде используется служба Angular $location)

Затем в шаблоне вы можете показать/скрыть на основе результата вызова (передача маршрута, который должен отображать элемент):

ng-show="isActive('/search-form')"

Ответ 2

Здесь подход, который я использовал с ui-router:

Я только хочу скрыть навигационную панель для небольшого количества страниц, поэтому я пошел с отключенным свойством в состояниях (состояниях), которые я хочу скрыть навигация.

.state('photos.show', {
  url: '/{photoId}',
  views: {
    "@" : {
      templateUrl: 'app/photos/show/index.html',
      controller: 'PhotoController'
    }
  },
  hideNavbar: true
})

Inject $state в вашем навигационном контроллере и поместите его в шаблон:

$scope.state = $state;

Затем добавьте ng-hide в шаблон вашего навигатора:

<nav ng-hide="state.$current.hideNavbar" ...

Ответ 3

Над работами отлично используя ui-router, не забудьте передать $scope и $state в свою функцию

Пример:

    app.controller('LoginCtrl', function($scope, $state){
        $scope.state = $state;
        console.log($state); // this will return the current state object just in case you need to see whats going on for newbies like me :)
    });