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

398

我正在尝试将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）。

— 雅各布
source

775

您必须src在双引号内将字符串单引号引起来：

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

资源

— 雅各布
source

4

是的，前几天这让我难过。有些相关答案stackoverflow.com/questions/13811948/...

— 海梅

60

这是因为ng标签中的任何字符串实际上都被评估为一个角度表达式。''表示这是一个字符串表达式。

— Gepsens

37

@Gepsens：一旦知道，就有意义。不过，如果文档明确提及它，那将是很好的。

— jacob

1

是的，现在我知道他们为什么会说“字符串” ...谢谢+ jacob的发现

— Shadoweb 2013年

7

我同意，我们绝对需要有关Angular的文档制作和一个布局系统。

— Gepsens

134

    <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使用双引号

— 卡尔佩什·普拉贾帕蒂（Kalpesh Prajapati）
source

8

该ng-include="'...'"语法肯定看起来更好。

— 2014年

所以我假设ng-include不以注释格式存在？

— OzzyTheGiant

50

对于解决这些问题，重要的是要知道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'”>

— 本杰明·麦克弗伦
source

6

实际上，这并不完全正确：路径可以是相对的，但相对于实例化该应用程序的html文件而言。在您的“不正确”示例中，如果add-more.html与处于同一目录，则该方法有效app.html。在我的答案中，views/和处于同一目录中app.html。

— jacob

如果使用Laravel并将结构放置在公用文件夹（public / app / templates / includes）中，并且调用文件为（public / app / templates / index.php），则包含路径必须为（app / templates / includes /filetoinclude.php）。我无法相对工作。

— 杰森·斯皮克

10

对于那些正在寻求从局部实现最短的“ item renderer”解决方案的人，因此可以使用ng-repeat和ng-include的组合：

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

实际上，如果您像这样将它用于一个中继器，它将起作用，但其中两个不会起作用！如果您一个又一个地拥有Angular（v1.2.16），它们会由于某种原因而发散，因此以pre-xhtml方式关闭div是更安全的：

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

— 平衡
source

这是几年后的事，但这正是我在中工作所需的<tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>。谢谢！

— 埃里克·D·约翰逊

9

也许这对初学者会有帮助

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

— BG布鲁诺
source

7

这为我工作：

ng-include src="'views/templates/drivingskills.html'"

完成div：

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>

— 狼
source

2

你不应该结合起来ng-view，并ng-inclue在相同的元素; src（请参阅templateUrl）应在路由器中配置。

— jacob 2015年

@jacob，那么您如何将其作为路线加载？因为我可以加载我的视图，并且可以触发我的控制器，但是它们没有连接，所以视图加载为空

— Sonic Soul

@SonicSoul使用ngRouter并将其设置为模板。或者，如果您要在路径中使用路由参数，则像JavaScript表达式一样使用它：someVar + 'some string'

— jacob

@jacob我已经使用了ngRouter，但是我不知道如何在ng-include中加载该路由。 html，它不会加载视图控制器

— Sonic Soul

@SonicSoul您是否要加载嵌套在通过ngRouter加载的视图中的模板？如果是这样，我认为您提供给src的值应该是项目目录结构中的绝对路径（而不是应用程序路由）。如果您尝试使用ngInclude设置路由模板，那是错误的。除此之外，这是6年前，而且我大概3年以上都没有使用AngularJS。

— jacob

0

尝试这个

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

— jayaweb
source

-1

在ng-build上，出现文件未找到（404）错误。所以我们可以使用下面的代码

<ng-include src="'views/transaction/test.html'"></ng-include>

的，

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

— 罗希特·帕特
source