AngularJS ng-include 不起作用
Posted
技术标签:
【中文标题】AngularJS ng-include 不起作用【英文标题】：AngularJS ng-include doesn't work 【发布时间】：2015-06-13 18:41:51 【问题描述】：这是main.html文件的来源
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var myApp = angular.module ('myApp',[]);
myApp.controller('myCtrl', function ($scope)
$scope.name = "Tim";
$scope.partialStuff = [ 'a', 'b', 'c' ];
alert(window.angular.version.full);//1.3.14 is displayed
);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
name
<div ng-repeat="partialVar in partialStuff">
Hello: <div ng-include src="'part.html'"></div>
</div>
</div>
</body>
</html>
还有一个 part.html 包含纯文本 'part' - 只有几个符号。
main.html 和 part.html 两个文件位于同一个文件夹中。
当我在浏览器中打开main.html 时，我没有看到来自part.html 的三个重复内容，但是我看到了三个Hello:。好像part.html 没有加载。
为什么？
谢谢。
请将其放在body标签中以使其工作
<script type="text/ng-template" id="part.html">
part
</script>
【问题讨论】：
您的网络选项卡中出现了什么，我假设它无法加载文件？您的应用可能设置了错误的目录。 任何控制台错误？如果没有错误，请检查网络并查看模板是否正确加载 使用 fiddler 查看请求在做什么。 不，没有错误。未加载文件 part.html。 （在谷歌浏览器中）。 FF - 工作正常。找到了解决方案（请参阅下面的我的评论）。谢谢！ 【参考方案1】：<div ng-include="'part.html'"></div>
我认为应该是正确的语法。 更多信息here
编辑：另外，文件路径应该来自根目录，而不是 html 文件的相对路径。
【讨论】：
我不认为应该有一个双引号后跟一个单引号。使用其中一种。 @Scottie 是的，当 url 是字符串时应该有 路径是相对于根文件夹而不是html文件？ 我在检查看到的代码时遇到了类似的问题 但是html没有渲染【参考方案2】：您不能使用 file:// 协议直接导入本地文件。
你应该看看： Is it possible to use ng-include without web server?
【讨论】：
其实可以，但不是在所有浏览器中都可以。 IE 和 Chrome 是问题所在。 是的。我刚刚检查过 - 它适用于 FF。使用谷歌浏览器时出现了这个问题。在这里找到的解决方案：***.com/questions/14420337/…【参考方案3】：ng-include 可以用作：
<div>
<ng-include src="demo.html"></ng-include>
这肯定会像普通的 src 一样包含您的文件。 ng-include 也在本地服务器上工作。不需要像 tomcat 这样的额外服务器来运行这个文件。 这将像 html 文件一样运行。
【讨论】：
以上是关于AngularJS ng-include 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
使用 ng-include 作为父节点时，使用 jquery 禁用所有子元素的 Angular 指令不起作用