ng-include 用于页眉/页脚答案

【问题标题】：ng-include use for header / footerng-include 用于页眉/页脚
【发布时间】：2016-04-12 06:30:38
【问题描述】：

Angular.js 的新手我想使用 ng-include 来处理我网站的许多页面共有的页眉和页脚，以便于更新

我开发了一个非常基本的小示例 (basic.html) 来测试它，但这不起作用

<html ng-app>

  <head>
    <title>Basic Angular.js</title>
    <script src="angular.min.js"></script>
  </head>

  <body>

    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
   </div>

    <div ng-include="'myFile.html'"> Inclusion 1</div>
    <div ng-include src="'myFile.html'"> Inclusion 2</div>

  </body>
</html>

Myfile.html 如下

<div> 
    <h1> Footer example </h1>
</div>

所有文件：basic.html、myFile.html 和 angular.min.js 都在同一个根目录中（这是其他帖子中与 ng-include 错误相关的问题）

虽然 basic.html 的第一部分工作正常（名称输入和带角度的动态显示），但 ng-include 不能在两种语法中工作：

    <div ng-include="'myFile.html'">...

或

    <div ng-include src="'myFile.html'"> ...

我没有错过其他与 ng-include 错误相关的帖子中出现的两个连续引号 " 和 '。

我不知道什么是正确的语法或缺少什么

【问题讨论】：

标签： javascript html angularjs angularjs-ng-include

【解决方案1】：

确保您已定义 angular.module 和 angular.controller。 ng-include 在没有定义的情况下将无法工作。我希望它有所帮助。

您的代码应该如下所示，注意 ng-app="myApp":

(function(angular){
    // create the module and register it to angular
    var app = angular.module('myApp', []);    

    app.controller("maincontroller", ["$scope"]);
}(angular));

<html ng-app="myApp">

  <head>
    <title>Basic Angular.js</title>
    <!--I'm using the cdn for demo purpose-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body>

    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
   </div>
    <!--both of these syntax should work-->
    <div ng-include="'myFile.html'"> Inclusion 1</div>
    <div ng-include src="'myFile.html'"> Inclusion 2</div>

  </body>
</html>

【讨论】：

当我运行上面的 sn-p 时 myFile.html 不显示
我创建了一个 myApp.js 文件，其中包含 var app = angular.module('myApp', []); app.controller("主控制器", ["$scope"]); myFile.html 也不显示
您使用 Web 服务器托管它，而不是像“file:///”那样打开文件目录。它应该工作