ng-include用于页眉/页脚

时间:2016-01-07 18:22:11

标签: javascript html angularjs angularjs-ng-include

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错误相关的其他帖子中的一个问题。

我无法理解什么是正确的语法或缺少什么

1 个答案:

答案 0 :(得分:0)

确保定义了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>