Question

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

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

Answer 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>

ng-include用于页眉/页脚

1 个答案: