简单的 ng-include 不起作用
[英]Simple ng-include not working
问题描述
我第一次使用 AngularJS，并且我正在努力将 ng-include 用于我的页眉和页脚。
这是我的树：
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
索引.html：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Test</title>
<script src="/assets/js/vendor/angular.js"></script>
<script src="/assets/js/vendor/route.js"></script>
<script src="/assets/js/vendor/resource.js"></script>
<script src="/assets/js/main.js"></script>
</head>
<body>
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
</body>
</html>
主文件
var app = angular.module("app", ["ngResource", "ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
});
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
});
$routeProvider.otherwise({ redirectTo: '/home'});
});
app.controller("HomeController", function($scope) {
$scope.title = "Home";
});
主页.html
<div>
<p>Welcome to the {{ title }} Page</p>
</div>
当我进入 home.html 页面时，我的页眉、导航和页脚没有出现。
11 个解决方案
解决方案1
150 已采纳 2014-04-10 15:03:05
你正在做一个包含标题。 url而不是标题。 .html 看起来您想在 src 属性中使用文字，因此您应该将它们用引号括起来，正如@DRiFTy 在评论中提到的那样。
改变
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
到
<div ng-include src="'partials/structure/header.html'"></div>
<div ng-include src="'partials/structure/navigation.html'"></div>
<div id="view" ng-view></div>
<div ng-include src="'partials/structure/footer.html'"></div>
如果这不起作用，请检查浏览器控制台是否有任何 404
解决方案2
100 2015-04-14 09:08:50
我有一个简单的 ng-include 没有渲染的类似问题：
<div ng-include="views/footer.html"></div>
我将文件路径用单引号括起来，现在呈现：
<div ng-include="'views/footer.html'"></div>
解决方案3
18 2015-03-14 19:01:55
我有一个类似的问题让我来到这里。
ng-include没有填充我的部分内容，但没有控制台错误，也没有 404 错误。
然后我意识到我做了什么。
为我修复：确保您在ng-include之外有ng-app ！ 如此明显。 成为 Angular 菜鸟的代价。
解决方案4
2 2015-11-12 16:52:57
我也遇到过这个问题。 这对我有用。
所以不要这样写： <div ng-include="'html/form.htm'"></div>
您想添加ng-app="" 。 所以它应该是这样的： <div ng-app="" ng-include="'html/form.htm'"></div>
解决方案5
2 2016-06-23 13:38:14
我在同一个问题上苦苦挣扎，并且几乎完成了不同堆栈中建议的所有操作，但对我不起作用。 在控制台上，我收到错误：
“仅协议方案支持跨源请求：http、data、chrome、chrome-extension、https、chrome-extension-resource。”
后来我意识到，我必须使用本地 Web 服务器（MAMP、WAMP 等）才能使其工作。
请注意上述错误信息。 您可能没有使用本地 Web 服务器来运行您的网站。
解决方案6
2 2017-01-06 12:50:32
我刚刚想通了这一点！
对我来说，我正在使用 CDN 来导入显然不起作用的 angular.min.js 文件。 我切换到：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
并在我的 body 标签中包含了ng-app="" ：
<body ng-app="">
<div ng-include="'testfile.html'"></div>
现在工作正常。 干杯!
解决方案7
1 2016-03-20 23:23:53
是的，如果没有'' ，ng 会尝试评估ng-include("")
此评估是您不在这些指令中放置{{}}另一个原因。
解决方案8
1 2018-01-18 03:45:59
ng-include 在 Chrome 和资源管理器中不起作用，但在 Firefox 中起作用，因此这可能是兼容性问题。 当然，请尝试在 Firefox 或 Edge 或其他浏览器中生成报告。
解决方案9
0 2018-03-29 07:06:31
我也有类似的问题：愚蠢的错误导致 IT ，我在 textArea EG 以下：
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" > `
未正确关闭 更正如下：
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" ></textarea>
<div ng-switch="vm.frmDOA.isGenerateDebitNote">
<ng-include src="vm.showupload()"></ng-include>
</div>
想张贴它可能会帮助我挖了几个小时来解决的任何人......
解决方案10
0 2019-10-22 19:24:10
ng-include 文件仅适用于从 Web 服务器获取的文件（需要类似http://mywebsite/myinclude.html链接的内容）。 如果您直接从本地文件夹中获取文件则不起作用（c:\\myinclude.html 不起作用）
解决方案11
-1 2019-06-18 13:41:15
如果您通过某个服务器（本地主机或在线）查看文件而不是直接在文件系统（file:///yourpath/index.html）下查看文件，则ng-include指令应该正常工作。
w3schools 的这个例子应该可以正常工作。
角js简单ng-include不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.