gpt4 book ai didi

javascript - ng-include 用于页眉/页脚

转载 作者:太空宇宙 更新时间:2023-11-04 13:09:54 24 4
gpt4 key购买 nike

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 的第一部分工作正常(名称输入和带 Angular 动态显示),但 ng-include 在两种语法中都不起作用:

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

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

我没有遗漏两个连续的引号 "和 ',这是与 ng-include 错误相关的其他帖子中的一个问题。

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

最佳答案

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

关于javascript - ng-include 用于页眉/页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34662398/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com