个人中心
gpt4 book ai didi

html - 使用 ng-include 时导航栏不显示(AngularJS，不使用 Bootstrap )

转载 作者：太空宇宙 更新时间：2023-11-04 10:39:44 24 4
gpt4 key购买 nike

我试图通过使用 ng-include 来引用它来创建一个将出现在每个页面上的导航栏。导航栏独立工作，但由于某种原因，它没有显示在我试图将其包含在其中的页面上(例如，仪表板)。我没有使用 bootstrap，因为我试图从头开始，用于学习目的。我觉得我可能不了解 AngularJS 的工作原理？

这是我目前的代码:

仪表板.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>

导航栏.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>

导航栏.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 {

}

最佳答案

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

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>

关于html - 使用 ng-include 时导航栏不显示(AngularJS，不使用 Bootstrap )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35903067/

24 4 0
文章推荐： python无需逐行替换文本文件中的单词
文章推荐： java - 如何加快 Android Studio 中的动画列表速度？
文章推荐： linux - Netcat 使用与请求不同的端口
文章推荐： java - 与 Eclipse 通信 Common Lisp