代码之家 › 专栏 › 技术社区 › user1030181

如何根据菜单选择在母版页的内容部分显示不同的内容HTML页

twitter-bootstrap angularjs html

user1030181 · 技术社区 · 7 年前

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

假设我选择“关于”->任务,我想显示htmlpage1.html;假设我选择“关于”->视觉,我想显示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>

1 回复 | 直到 7 年前

Aleksey Solovey 7 年前

你应该用 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 (用于页眉、页脚)或指令(用于登录部分等小功能)。