Question

我有一个包含一个jumbotron的div的页面，这是访问该站点时显示的第一个页面。在这个页面上，我有一些链接使用'$ routeProvide'/ angular链接到不同的页面。我想隐藏其他链接/页面中的jumbotron，但我不知道该怎么做。

主页：

<body ng-app="single-page-app">
    <div ng-controller="cfgController">
        <div>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
            <div class="navbar-header col-md-12 col-sm-12 logo">
                <a href="index.html"><img src="img/gilgal.png" class="img-responsive center-block" alt="Responsive image"></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="container-fluid col-md-9 col-sm-12 hidden-xs col-md-offset-2">
              <ul class="nav navbar-nav" id="navbar">
                <li class="navlink"><a href="#/about">About Us</a></li>
                <li class="navlink"><a href="#/advService">Advisory Service</a></li>
                <li class="navlink"><a href="#/imService">Investment Service</a></li>
                <li class="navlink"><a href="#/greService">Infrastructure Development</a></li>
                <li class="navlink"><a href="#/contact">Contact</a></li>
              </ul>
            </div>
        </div>
        </nav>
        </div>
        <div class="jumbotron" ng-hide="hideme">
        <div class="container-fluid">
            <div class="row jumb">
                <div class="col-md-4 col-md-offset-1 head-card">
                    <h4 class="head-text">ADVISORY SERVICES</h4>
                    <p class="head-desc">We provide Corporate Finance Advisory Services for private and public institutions in Sub-Saharan Africa</p>
                </div>
                <div class="col-md-2"></div>
                <div class="col-md-4 head-card">
                    <h4 class="head-text">INVESTMENT MANAGEMENT SERVICES</h4>
                    <p class="head-desc">We focus on Real Estate and Infrastructural Projects in Sub-Saharan Africa</p>
                </div>
            </div>
            </div>
        </div> 
        <div ng-view>

        </div>
        <div class="container-fluid col-md-12 foot">
            <p class="col-md-offset-1">All content copyright of Gilgal Capital Limited 2015 | Branding and Website by Ashebby</p>
        </div>
    <!-- Angular Route.js -->
    <script src="js/angular-route.min.js"></script>
    <!-- Angular.js -->
    <script src="js/angular.min.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </div>
  </body>

这是我的script.js

var app=angular.module('single-page-app',['ngRoute']);


app.config(function($routeProvider){
      $routeProvider
          .when('/index',{
                templateUrl: 'index.html'
          })  
          .when('/about',{
                templateUrl: 'about.html'
          })
            .when('/advService',{
                templateUrl: 'advService.html'
          })
            .when('/imService',{
                templateUrl: 'imService.html'
          })
            .when('/greService',{
                templateUrl: 'greService.html'
          })
            .when('/contact',{
                templateUrl: 'contact.html'
          });


});
app.controller('cfgController'['$Scope', function($scope) {

$Scope.hideme = false;

$Scope.$on('$locationChangeStart', function(event) {
    $scope.hideme = true;
});

}]);

这是指向另一页about.html的典型链接：

<div class="container-fluid col-md-12 about-us">
        <div class="about-us col-md-offset-1">
            <h2 class="col-md-10">
                <span class="title2">About Us</span>
                <div class="line"></div>
            </h2>
            <p class="col-md-10 article">text</p>
        </div>
</div>

Answer 1

这真的很难......所以ng-hide很容易使用

要隐藏div，请执行以下操作：

 <div ng-hide="hideme">your content </div>

并在控制器中定义hideme变量，如下所示：

  $scope.hideme = true; // true to hide ,false to show

编辑：所以在你的情况下这样做：

  <li class="navlink"><a ng-click="hideIt()" href="#/about">About Us</a></li>

在你的控制器中制作一个隐藏它以隐藏jumbotron div：

   $scope.hideIt = function(){
     $scope.hideme = true;
     }

Answer 2

app.run(['$rootScope', function($rootScope) {

$rootScope.hideme = false;

$rootScope.$on('$routeChangeStart', function(){
    $rootScope.hideme = true;

});

除了您的代码，只需添加此运行块。它应该工作。

如何使用角度js ng-hide隐藏div

2 个答案: