Question

我想使用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>

在我的index1.html文件中我有这个：

<html lang="en" ng-app="myApp">

然后在body标签内

<div appheader></div>

我知道这个问题已被提出，因此我的实施。但我一直在控制台中收到此错误：Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

这是我的index1.html文件顶部的代码，可能导致问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  <link href="css/index1.css" rel="stylesheet">

这是我的main.js：

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

Answer 1

如果这是你的main.js

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

您需要创建模块

angular.module('myApp',[])

将header.html导入每个html页面

1 个答案: