Javascript ng-include 的正确语法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13943471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the correct syntax of ng-include?
提问by jacob
I'm trying to include an HTML snippet inside of an ng-repeat, but I can't get the include to work. It seems the current syntax of ng-includeis different than what it was previously: I see many examples using
我正在尝试在 中包含一个 HTML 片段ng-repeat，但我无法让包含工作。似乎当前的语法与ng-include以前的不同：我看到许多示例使用
<div ng-include src="path/file.html"></div>
But in the official docs, it says to use
但是在官方文档中，它说要使用
<div ng-include="path/file.html"></div>
But then down the pageit is shown as
但随后在页面下方显示为
<div ng-include src="path/file.html"></div>
Regardless, I tried
不管怎样，我试过了
<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>
My snippet is not very much code, but it's got a lot going on; I read in Dynamically load template inside ng-repeatthat that could cause a problem, so I replaced the content of sidepanel.htmlwith just the word foo, and still nothing.
我的代码片段不是很多代码，但它有很多事情要做；我在动态加载模板里面ng-repeat读到这可能会导致问题，所以我sidepanel.html只用单词替换了内容foo，但仍然没有。
I also tried declaring the template directly in the page like this:
我还尝试直接在页面中声明模板，如下所示：
<script type="text/ng-template" id="tmpl">
foo
</script>
And running through all the variations of ng-includereferencing the script's id, and still nothing.
并通过ng-include引用脚本的所有变体id，仍然没有。
My page had a lot more in it, but now I've stripped it down to just this:
我的页面中有更多内容，但现在我已将其精简为以下内容：
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
<!-- views/main.html -->
<header>
<h2>Blah</h2>
</header>
<article id="sidepanel">
<section class="panel"> <!-- will have ng-repeat="panel in panels" -->
<div ng-include src="views/sidepanel.html"></div>
</section>
</article>
<!-- index.html -->
</body>
</html>
The header renders, but then my template doesn't. I get no errors in the console or from Node, and if I click the link in src="views/sidepanel.html"in dev tools, it takes me to my template (and displays foo).
标题呈现，但我的模板没有。我在控制台或 Node 中没有收到任何错误，如果我单击src="views/sidepanel.html"开发工具中的链接，它会将我带到我的模板（并显示foo）。
回答by jacob
回答by Kalpesh Prajapati
<ng-include src="'views/sidepanel.html'"></ng-include>
OR
或者
<div ng-include="'views/sidepanel.html'"></div>
OR
或者
<div ng-include src="'views/sidepanel.html'"></div>
Points To Remember:
要记住的要点：
--> No spaces in src
--> src 中没有空格
--> Remember to use single quotation in double quotation for src
--> src 记得在双引号中使用单引号
回答by Benjamin McFerren
For those trouble shooting, it is important to know that ng-include requires the url path to be from the app root directory and not from the same directory where the partial.html lives. (whereas partial.html is the view file that the inline ng-include markup tag can be found).
对于那些故障排除，重要的是要知道 ng-include 要求 url 路径来自应用程序根目录，而不是来自 partial.html 所在的同一目录。（而 partial.html 是可以找到内联 ng-include 标记标记的视图文件）。
For example:
例如：
Correct: div ng-include src=" '/views/partials/tabSlides/add-more.html' ">
Incorrect: div ng-include src=" 'add-more.html' ">
正确： div ng-include src=" '/views/partials/tabSlides/add-more.html' ">
不正确：div ng-include src="'add-more.html'">
回答by Balance
For those who are looking for the shortest possible "item renderer" solution from a partial, so a combo of ng-repeat and ng-include:
对于那些正在从部分中寻找最短可能的“项目渲染器”解决方案的人，因此使用 ng-repeat 和 ng-include 的组合：
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />
Actually, if you use it like this for one repeater, it will work, but won't for 2 of them! Angular (v1.2.16) will freak out for some reason if you have 2 of these one after another, so it is safer to close the div the pre-xhtml way:
实际上，如果您像这样将它用于一个中继器，它会起作用，但不会用于其中的两个！Angular (v1.2.16) 会因为某种原因而吓坏了，如果你一个接一个地有 2 个，所以以 pre-xhtml 的方式关闭 div 更安全：
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>
回答by BG Bruno
Maybe this will help for beginners
也许这对初学者有帮助
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title></title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div ng-include src="'view/01.html'"></div>
<div ng-include src="'view/02.html'"></div>
<script src="angular.min.js"></script>
</body>
</html>
回答by Hymanal
This worked for me:
这对我有用：
ng-include src="'views/templates/drivingskills.html'"
complete div:
完整的div：
<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
回答by jayaweb
try this
尝试这个
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
回答by Rohit Parte
On ng-build, file not found(404) error occur. So we can use below code
在 ng-build 上，发生文件未找到（404）错误。所以我们可以使用下面的代码
<ng-include src="'views/transaction/test.html'"></ng-include>
insted of,
插入的，
<div ng-include="'views/transaction/test.html'"></div>
