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错误相关的其他帖子中的一个问题。
我无法理解什么是正确的语法或缺少什么
答案 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>