Question

我正在使用AngularUI路由器浏览我网站上的内容。我有一些网页显示页眉/页脚导航和一些不显示。我希望能够检测当前页面是什么，并在需要时插入页眉/页脚的HTML。

这是我当前的路由器

<job> 
    <displayName>test1</displayName>  
    <url>https://something/test1</url>  
    <lastBuild> 
      <building>true</building>  
      <builtOn>server1</builtOn> 
    </lastBuild> 
</job>
<job> 
    <displayName>test3</displayName>  
    <url>https://something/test3</url>  
    <lastBuild> 
      <building>true</building>  
      <builtOn>server2</builtOn> 
    </lastBuild> 
</job>

对于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 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>

我怎样才能做到这一点？

Answer 1

您可以在$state上公开$rootScope，这样就可以在您的网页中访问它了。然后，您只需检查state.current.name != 'login' 如下所示： Exposing the current state name with ui router

编辑：我所说的工作人员：https://plnkr.co/edit/JDpCo3fTePobuX9Qoxjn

Answer 2

你几乎就在那里。只需在相应状态的参数中添加一个标志：

.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>

在某些网页上显示/隐藏网站上的元素

2 个答案: