Question

我正在尝试创建一个将出现在每个页面上的导航栏，使用ng-include来引用它。导航栏本身可以工作，但由于某种原因，它没有出现在我试图将其包含在的页面上（例如，仪表板）。我没有使用bootstrap，因为我试图从头开始，为了学习目的。我觉得我可能不理解AngularJS是如何工作的？

这是我到目前为止的代码：

dashboard.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel='stylesheet' href='dashboard.css'>
    <title>Dashboard</title>
  </head>
<body ng-app='MyApp'>

    <nav class="navbar"><div ng-include src="'navbar.html'"></div><p>Hi!</p></nav>

<div class='dashboard'>
  Here be contents
</div>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

navbar.html：

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <link rel='stylesheet' href="navbar.css">
  </head>
<body ng-app='MyApp'>

<nav class='navbar'>
  <ul>
    <li><a href="../app/dashboard/dashboard.html">Home</a></li>  
    <li><a href="app/other.html">Temp</a></li>


  </ul>    




</nav>


  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

navbar.css：

.navbar {
    font-family: Arial, sans-serif;
    font-size: .9em;
}
.navbar ul {
    list-style-type: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: lightslategray;
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar li {
    float: left;    
}
.navbar a {
    display: block;
    text-decoration: none;
    cursor: pointer;
    padding: 14px 16px;
    text-align: center;
    background-color:lightslategray;
    color: white;
}
.navbar a:hover {
    background-color: darkslategrey;
}
.active {

}

Answer 1

您的导航栏模板不应该是一个全新的HTML页面。您只是注入标记，因此该文件应包含将要编写的代码。

navbar.html应仅包含

<nav class='navbar'>
  <ul>
    <li><a href="../app/dashboard/dashboard.html">Home</a></li>  
    <li><a href="app/other.html">Temp</a></li>    
  </ul>
</nav>

Answer 2

尝试删除navbar.html周围的单引号，并确保navbar.html与dashboard.html位于同一目录中。如果它位于不同的目录中，则必须指定。

Answer 3

首先，ng-include必须只包含该部分所需的代码，例如<nav> </nav>代码。
其次，因为你没有在dashboard.html上添加navbar.css，这就是导航栏没有显示的原因。

使用ng-include时没有显示导航栏（AngularJS，不使用bootstrap）

3 个答案: