本文翻译自:What is the correct syntax of ng-include?
I'm trying to include an HTML snippet inside of an ng-repeat
, but I can't get the include to work. 我正在尝试在ng-repeat
包含一个HTML代码段,但我无法让include工作。 It seems the current syntax of ng-include
is different than what it was previously: I see many examples using 似乎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 page it 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-repeat
that that could cause a problem, so I replaced the content of sidepanel.html
with 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-include
referencing 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
)。
#1楼
参考:https://stackoom.com/question/wVKh/ng-include的正确语法是什么
#2楼
You have to single quote your src
string inside of the double quotes: 你必须在双引号内单引号你的src
字符串:
<div ng-include src="'views/sidepanel.html'"></div>
#3楼
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. 对于那些故障排除,重要的是要知道ng-include要求url路径来自app根目录而不是来自partial.html所在的同一目录。 (whereas partial.html is the view file that the inline ng-include markup tag can be found). (而partial.html是可以找到内联ng-include标记标记的视图文件)。
For example: 例如:
Correct: div ng-include src=" '/views/partials/tabSlides/add-more.html' "> 正确:div ng-include src =“'/views/partials/tabSlides/add-more.html'”>
Incorrect: div ng-include src=" 'add-more.html' "> 不正确:div ng-include src =“'add-more.html'”>
#4楼
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'" />
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)会因为某些原因而出于某种原因而变得惊慌失措,因此以前xhtml方式关闭div会更安全:
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>
#5楼
<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的双引号中使用单引号
#6楼
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>