ng-include的正确语法是什么？

最新推荐文章于 2022-07-11 07:37:00 发布

w36680130

最新推荐文章于 2022-07-11 07:37:00 发布

阅读量240

点赞数

文章标签： javascript html5 include angularjs repeater

原文链接：https://oldbug.net/q/wVKh/What-is-the-correct-syntax-of-ng-include

版权

本文翻译自：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>

Source 资源

#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>

w36680130

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng-include的正确语法是什么？

I'm trying to include an HTML snippet inside of an ng-repeat , but I can't get the include to work.
复制链接

扫一扫