Скрыть верхний и нижний колонтитулы во время загрузки определенных страниц

Question

Приложение Angular 1.x: Как мне спрятать верхний и нижний колонтитулы на некоторых страницах моего приложения? Я устанавливаю свойство данных navigateOut для своего состояния и использую ng-if, чтобы показать \ скрыть элементы (такие как верхний и нижний колонтитулы) на основе значения этого свойства. Проблема в том, что при загрузке страницы состояние еще не установлено, поэтому я могу видеть элементы в течение нескольких секунд.

  .state('signup', {
    url: '/signup',
    template: require('partials/sso.html'),
    controller: 'SignupController as signup',
    data: {
      navigateOut: false
    }
  })


   <app-footer ng-if="$state.current.data.navigateOut !== false"></app-footer>

Answer 1

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

Если проблема не устранена, это может быть связано с библиотекой ng-animate, которая включена по умолчанию. Попробуйте отключить его

<div ui-view="header"></div>
<div ui-view="content"><!-- Content --></div>
<div ui-view="footer"></div>


$stateProvider
    .state('myapp', {
        views: {
          'header': {
            template:'header.html',
            controller:'HeaderController'
          },
          'content': {
            template:'content.html'
          },
          'footer': {
            template:'footer.html',
            controller:'FooterController'
          }
       }    
})

Answer 2

Попробуйте указать условие ng-if в теге div, окруженном им, вместо тега app-footer, например

<div ng-if="$state.current.data.navigateOut !== false">    
<app-footer ></app-footer>
</div>

или с помощью ng-класса со скрытым именем класса, чтобы скрыть элемент, вместо использования ng-if или ng-show / ng-hide.