Показать / Скрыть элементы на сайте для определенных страниц

Question

Показать / Скрыть элементы на сайте для определенных страниц

0

Я использую AngularUI Router для навигации по контенту на своем веб-сайте. У меня есть несколько веб-страниц, которые показывают навигацию заголовка/нижнего колонтитула, а некоторые - нет. Я хочу, чтобы определить, что моя текущая страница, и вставить HTML для верхнего/нижнего колонтитула, если это необходимо.

Вот мой текущий маршрутизатор

angular.module('app', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
  function($urlRouterProvider, $stateProvider) {

    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'partials/home.html',
        controller: 'homeCtrl'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'partials/about.html',
        controller: 'aboutCtrl'
      })
      .state('contact', {
        url: '/contact',
        templateUrl: 'partials/contact.html',
        controller: 'contactCtrl'
      })
      .state('create', {
        url: '/create',
        templateUrl: 'partials/create.html',
        controller: 'createCtrl'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'partials/login.html',
        controller: 'loginCtrl'
      })
}]);

Для html у меня есть это

<html ng-app="app">
  <body>

    <!-- *********** HEADER ************* -->
    <div ng-include=""></div>

    <!-- ********** CONTENT *********** -->
    <div ui-view></div>

    <!-- **************** FOOTER ****************** -->
    <div ng-include="'partials/standard_footer.html'"></div>

  </body
</html>

Для создания веб-страниц и входа в систему я не хочу показывать верхний и нижний колонтитулы, но я не уверен, как это сделать.

Я хочу сделать что-то вроде этого,

<div ng-if="!login && !create" ng-include="'standard_header.html'"></div>

Как я могу это достичь?

Gary Holiday 29 май 2016, в 04:58

Источник

Теги:

html

angularjs

angular-ui-router

2 ответа

0

Ты почти там. Просто добавьте флаг в params соответствующих состояний:

.state('create', {
  url: '/create',
  templateUrl: 'partials/create.html',
  controller: 'createCtrl',
  params: {
    hideHeaderAndFooter: true
  }
})
.state('login', {
  url: '/login',
  templateUrl: 'partials/login.html',
  controller: 'loginCtrl',
  params: {
    hideHeaderAndFooter: true
  }
})

А затем добавьте службу $ stateParams в свои контроллеры. Каждое свойство объекта params будет отображаться как свойство объекта, возвращаемого этой службой:

loginCtrl.$inject = ['$scope', '$stateParams'] 

function loginCtrl($scope, $stateParams) {
  $scope.hideHeaderAndFooter = $stateParams.hideHeaderAndFooter
}

Затем вы можете использовать ng-если только так, как вы хотели использовать его:

<div ng-if="!hideHeaderAndFooter" ng-include="'standard_header.html'"></div>

Jonathan Dupré 29 май 2016, в 01:00

Ещё вопросы

Ankit Gupta · Accepted Answer · 2016-05-29T00-02-00.000Z

Вы можете выставить $state на $rootScope и сделать его доступным на вашей веб-странице. Затем вы можете просто проверить state.current.name != 'login' Как state.current.name != 'login' ниже: отображение текущего имени состояния с помощью ui router

Изменение: Рабочий Plunker того, что я имел в виду: https://plnkr.co/edit/JDpCo3fTePobuX9Qoxjn

Я новичок в угловых и не могу следовать этому, вы можете уточнить?