Javascript 将header.html导入每个html页面_Javascript_Html_Angularjs_Navbar

Javascript 将header.html导入每个html页面

javascript html angularjs

Javascript 将header.html导入每个html页面,javascript,html,angularjs,navbar,Javascript,Html,Angularjs,Navbar,我想使用AngularJS在我使用的每个html中包含一个标题。以下是header.html： <!DOCTYPE html> <html lang="en"> <head> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" id="navbar"> <div class="container-fluid" id="contain

我想使用AngularJS在我使用的每个html中包含一个标题。以下是header.html：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
  <div class="container-fluid" id="container-fluid1">
    <div class="navbar-header" id="websiteName">
      <a class="navbar-brand" href="#">Richazon</a>
    </div>
    <div id="theLinks">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Navbar Color <b class="caret"></b></a>
                <ul class="dropdown-menu" id="dropdown-menu1">
                    <li class="greenBg"><a href="#">NB1</a></li>
                    <li id="greenBg"><a href="#">NB2</a></li>
                    <li id="greenBg"><a href="#">NB3</a></li>
                </ul>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 2 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 2.0.0 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 2.0.1 </a></li>
                    <li class="divider"></li>
                    <li><a href="AngularListRemoval.html">AngularJS List Removal </a></li>
                </ul>
        </li>

        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 3 <b class="caret"></b></a>
                <ul class="dropdown-menu" id="dropdown-menu">
                    <li><a href="#">Page 3.0.0 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.1 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.3 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.4 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.5 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.6 </a></li>
                </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

</body>
</html>

下面是我的main.js：

angular.module('myApp')
  .directive('appheader', function() {
    return {
      templateUrl: 'header.html'
    };
  });

如果这是你的main.js

angular.module('myApp')
.directive('appheader', function() {
  return {
  templateUrl: 'header.html'
  };
});

您需要创建一个模块

angular.module('myApp',[])

在索引中，您将链接angular脚本两次版本1.3.14，然后是版本1.0.1。bootstrap也链接到twicetemplates不应该包含和删除这些标记，仍然不会使标题可见header.html应该只包含nav元素。您真的需要自定义指令吗？你必须来自像PHP这样的语言，在那里你可以包含一个完整的模板页面，但这不是一个正确的方法继续使用Angular。如果您不想使用javascript创建动态HTML模板，请使用Jade或Hogan，但Angular必须用作前端框架。可以包含页面中的元素，但不能使用和标记附加整个页面，除非它位于iframe中。

angular.module('myApp')
  .directive('appheader', function() {
    return {
      templateUrl: 'header.html'
    };
  });

angular.module('myApp')
.directive('appheader', function() {
  return {
  templateUrl: 'header.html'
  };
});

angular.module('myApp',[])