Question

我有一个导航栏我试图注入主页面。我跑了页面并检查了F12＆gt;网络显示指令的templateURL（navbar.html）未被调用或未被注入。没有错误。任何人都知道我的代码可能有什么问题吗？

目录结构是：

landingpage.html
JS
- 控制器
  - NavController.js
- 指令
  - navappDirective.js
- app.js
模板
- navbar.html

以下是代码：

landingpage.html

<html>
   <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!--<link href="../css/landingpage.css" rel="stylesheet">-->

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--<script type="text/javascript">
        alert("this works");
    </script>-->

<body>
    <div>
        <navbar ></navbar>
    </div>
    <!-- Insert navbar-->

    <!-- Modules -->
        <script src="js/app.js"></script>

    <!-- Controllers -->
        <script src="js/controllers/NavController.js"></script>

    <!-- Directives -->
        <script src="js/directives/navappDirective.js"></script>

</body>

navappDirective.js

navapp.directive('navbar', function() {
  return { 
  restrict: 'E', 
  scope: { 

  }, 
  /*template: '<p>Hi</p>'*/
  templateUrl: 'templates/navbar.html' 
  }; 
});

navbar.html目前只有一个段落用于测试目的。

由于

Answer 1

landingpage.html中缺少

ng-app

在您的landingpage.html中，请按以下更新

 <body ng-app="myapp">

在app.js中，您可能应该

angular.module('myapp',[]);

Answer 2

谢谢大家！

我在导航栏中调用了ng-app，因为这是我使用控制器信息并认为可行的地方。

通过以下步骤解决了问题：

将templateURL更改为../../ templates / navbar.html
在landingpage.html上调用ng-app指令这允许页面调用应用程序。仍然在导航栏中有ng-controller指令用于封装目的。
完成上述步骤后，我仍然遇到交叉引用错误，因为您无法从文件系统调用html文件。所以我在使用python -m http.server（对于Python 3）运行了一个python服务器，然后cd到了持有我的项目的目录。然后我可以使用localhost：8000 /

我认为来自Angular的app.html没有被注入

2 个答案: