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

IT技术 javascript html angularjs syntax include
2021-01-22 11:56:00

我正在尝试在 中包含一个 HTML 片段ng-repeat，但我无法让包含工作。似乎当前的语法与ng-include以前的不同：我看到许多示例使用

<div ng-include src="path/file.html"></div>

但是在官方文档中，它说要使用

<div ng-include="path/file.html"></div>

但随后在页面下方显示为

<div ng-include src="path/file.html"></div>

不管怎样，我试过了

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

我的代码片段不是很多代码，但有很多事情要做；我在动态加载模板里面ng-repeat读到这可能会导致问题，所以我sidepanel.html只用单词替换了内容foo，但仍然没有。

我还尝试直接在页面中声明模板，如下所示：

<script type="text/ng-template" id="tmpl">
    foo
</script>

并通过ng-include引用脚本的所有变体id，仍然没有。

我的页面中有更多内容，但现在我已将其精简为以下内容：

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

标题呈现，但我的模板没有。我在控制台或 Node 中没有收到任何错误，如果我单击src="views/sidepanel.html"开发工具中的链接，它会将我带到我的模板（并显示foo）。

6个回答

您必须src在双引号内单引号您的字符串：

<div ng-include src="'views/sidepanel.html'"></div>

来源

我同意，我们肯定需要一份关于 Angular 的文档工作和一个布局系统。
2021-03-16 11:56:00
严重地。可笑。你会认为他们会提到它是一种表达，尽管它看起来很明显。
2021-03-16 11:56:00
这样做的原因是 ng 标签中的任何字符串实际上都被评估为角度表达式。'' 告诉它它是一个字符串表达式。
2021-03-17 11:56:00
@Gepsens：一旦你知道它就有意义了。如果文档明确提到它会很好。
2021-03-21 11:56:00
是的，这是前几天咬我的。有点相关的答案stackoverflow.com/questions/13811948/...
2021-03-27 11:56:00 
    <ng-include src="'views/sidepanel.html'"></ng-include>

或者

    <div ng-include="'views/sidepanel.html'"></div>

或者

    <div ng-include src="'views/sidepanel.html'"></div>

要记住的要点：

--> src 中没有空格

--> src的双引号记得用单引号

该ng-include="'...'"语法肯定看起来更好。
2021-03-25 11:56:00
所以我假设 ng-include 不存在于评论格式中？
2021-03-29 11:56:00

对于那些故障排除，重要的是要知道 ng-include 要求 url 路径来自应用程序根目录，而不是来自 partial.html 所在的同一目录。（而 partial.html 是可以找到内联 ng-include 标记标记的视图文件）。

例如：

正确： div ng-include src=" '/views/partials/tabSlides/add-more.html' ">

不正确：div ng-include src="'add-more.html'">

实际上，这并不完全正确：路径可以是相对的，但它是相对于从中实例化应用程序的 html 文件而言的。在您的“不正确”示例中，如果add-more.html与app.html. 在我的回答中，views/与app.html.
2021-03-24 11:56:00
在使用 Laravel 并将结构放置在公共文件夹 (public/app/templates/includes) 和调用文件是 (public/app/templates/index.php) 的情况下，包含路径需要是 (app/templates/includes /filetoinclude.php）。我无法得到相对于工作。
2021-04-06 11:56:00

对于那些正在从部分中寻找最短可能的“项目渲染器”解决方案的人，因此使用 ng-repeat 和 ng-include 的组合：

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />

实际上，如果您像这样将它用于一个中继器，它会起作用，但不会用于其中的两个！Angular (v1.2.16) 会因为某种原因而吓坏了，如果你一个接一个地有 2 个，所以以 pre-xhtml 的方式关闭 div 更安全：

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

这是多年以后，但这正是我在<tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. 谢谢！
2021-03-31 11:56:00

也许这对初学者有帮助

<!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>
其它你可能感兴趣的问题
上一篇检查对象是否是 jQuery 对象 下一篇JavaScript 函数顺序：为什么重要？