Question

如何根据标题中的菜单选择在母版页的内容布局部分中显示不同的内容页面。

假设我选择了About-＆gt;任务我想显示HtmlPage1.html让我们说如果我选择About-＆gt; Vision我想要显示HtmlPage2.html

BasePage.html中的MyHeader菜单

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="./" class="navbar-brand">Bootstrap Menu</a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="HtmlPage1.html">Mission</a></li>
                                <li><a href="HtmlPage2.html">Vision</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Products</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li class="active">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

  </div>
 <div style="margin-top:100px; text-align:center;"> 
            **********************Main Content Here****************************

  </div>
  <div>

Answer 1

您应该使用ngRoute（来自angular-route模块）来显示带有模板/部分内容的内容。您需要添加<div ng-view></div>而不是*Main Content Here*才能加载模板。这些部分不需要任何标题，例如<!DOCTYPE html>，因为它们已插入HTML并呈现。

这是一个小型演示：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "main.html"
    })
    .when("/page1", {
      templateUrl: "HtmlPage1.html"
    })
    .when("/page2", {
      templateUrl: "HtmlPage2.html"
    })
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

  <p><a href="#!/">Main</a></p>

  <ul>
    <li><a href="#!/page1">Mission</a></li>
    <li><a href="#!/page2">Vision</a></li>
  </ul>

  <div style="text-align:center;">
    <div ng-view></div>
  </div>


  <!-- These can be separate files in your directory -->
  <script type="text/ng-template" id="main.html">
    Main page
  </script>
  <script type="text/ng-template" id="HtmlPage1.html">
    Mission page
  </script>
  <script type="text/ng-template" id="HtmlPage2.html">
    Vision page
  </script>

</body>

</html>

或者，您可以使用ng-include（对于页眉，页脚）或指令（对于登录部分等小功能）。

如何根据菜单选择

1 个答案: