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

尝试在其周围的div标签中提供ng-if条件，而不是像app-footer标签那样

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

或通过使用具有“隐藏”类名称的ng-class来隐藏元素，而不是使用ng-if或ng-show / ng-hide。

Answer 2

我想到的一种方法是为页眉和页脚创建单独的模板和控制器。在标题，页脚和内容下命名多个ui视图。对于每种状态，您仅加载所需的组件。

如果问题仍然存在，则可能是由于默认启用了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'
          }
       }    
})

在加载某些特定页面时隐藏页眉和页脚

2 个答案: