Question

所以我在angular js app中有一个index.html页面，它加载所有脚本和所有视图中都存在的默认标题。这是我的index.html：

<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
</head>

<body ng-app="pcrApp">
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <md-toolbar ng-controller="HeaderCtrl" role="navigation" layout="row">

        <div layout-align="left center" flex="15" hide-sm>
            <md-button id="jdpa-logo" ng-href="#/list" ng-click="resetSelectedIndex()">J.D. Power PCR Admin Tool</md-button>
        </div>

        <md-tabs md-selected="data.selectedIndex" layout="row" layout-align="left center" flex>
            <md-tab id="tab-list" flex-sm="5" label="Study PCRs"></md-tab>
            <md-tab id="tab-new" flex-sm="5" label="Create New"></md-tab>
        </md-tabs>
    </md-toolbar>



    <div ng-view=""></div>



    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<!--
    <script>
        ! function (A, n, g, u, l, a, r) {
            A.GoogleAnalyticsObject = l, A[l] = A[l] || function () {
                    (A[l].q = A[l].q || []).push(arguments)
                }, A[l].l = +new Date, a = n.createElement(g),
                r = n.getElementsByTagName(g)[0], a.src = u, r.parentNode.insertBefore(a, r)
        }(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-XXXXX-X');
        ga('send', 'pageview');
    </script>
-->

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>
    <script src="bower_components/angular-elastic/elastic.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/modules/unique.js"></script>
    <script src="scripts/services/constants.js"></script>
    <script src="scripts/controllers/list.js"></script>
    <script src="scripts/controllers/new.js"></script>
    <script src="scripts/controllers/details.js"></script>
    <script src="scripts/services/pcrService.js"></script>
    <!-- endbuild -->
</body>

</html>

正如您所看到的，这是我拥有标题代码的地方：

<md-toolbar ng-controller="HeaderCtrl" role="navigation" layout="row">

    <div layout-align="left center" flex="15" hide-sm>
        <md-button id="jdpa-logo" ng-href="#/list" ng-click="resetSelectedIndex()">J.D. Power PCR Admin Tool</md-button>
    </div>

    <md-tabs md-selected="data.selectedIndex" layout="row" layout-align="left center" flex>
        <md-tab id="tab-list" flex-sm="5" label="Study PCRs"></md-tab>
        <md-tab id="tab-new" flex-sm="5" label="Create New"></md-tab>
    </md-tabs>
</md-toolbar>

然后在<div ng-view=""></div>

之后加载模板的视图

我有一个登录页面，我希望在没有显示标题的情况下显示。如何禁用登录页面的标题？

Answer 1

使用ng-hide确定是否显示标题。说，

<md-toolbar ng-hide="switches && switches.hideHeader" ng-controller="HeaderCtrl" role="navigation" layout="row">
...

在登录页面控制器上，使用：

$scope.switches = { hideHeader: true }

禁用登录的标题视图

1 个答案: