logo标签列表

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

javascripthtmlangularjssyntaxinclude
405

我想在ng-repeat中包含一个HTML片段，但是我无法使它正常工作。似乎当前的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>

我的代码片段并不是很多，但是它里面发生了很多事情；我在Dynamically load template inside ng-repeat中看到可能会有问题，所以我用单词foo替换了sidepanel.html的内容，但仍然没有任何反应。

我还尝试在页面中直接声明模板，就像这样：

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

8个回答
782

在双引号内必须用单引号对src字符串进行引用：

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

来源

4
是的，这一天它咬了我。与此有关的答案在这里：https://dev59.com/XmYr5IYBdhLWcg3wRoOW#13812605 - jaime
62
这是因为ng标签中的任何字符串实际上都会被解释为Angular表达式。 ''表示它是一个字符串表达式。 - Gepsens
39
@Gepsens说的话一旦了解了就很有意义。不过如果文档能明确提到这一点就更好了。 - Jakob Jingleheimer
7
我同意，我们绝对需要关于Angular的文档工作以及一个布局系统。 - Gepsens
1
真的是太荒谬了。你会认为他们会提到这是一个表达式，尽管它看起来很明显。 - dudewad
显示剩余4条评论
135
    <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

8
ng-include="'...'" 语法确实看起来更好。 - Pier-Luc Gendreau
所以我假设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'">

6
实际上，这不完全正确：路径可以是相对的，但是它是相对于从中实例化应用程序的html文件而言的。在您的“不正确”的示例中，如果add-more.html与app.html在同一个目录中，则会起作用。在我的答案中，views/与app.html在同一个目录中。 - Jakob Jingleheimer
在使用Laravel并将结构放置在公共文件夹（public/app/templates/includes）中，调用文件为（public/app/templates/index.php）时，包含路径需要是（app/templates/includes/filetoinclude.php）。我无法让相对路径起作用。 - Jason Spick
10

如果你正在寻求从部分中获取最短的“项渲染器”解决方案，可以使用ng-repeat和ng-include的组合：

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

实际上，如果您只对一个 repeater 使用它，它将起作用，但是对于两个 repeater，它将无法正常工作！由于某些原因，Angular（v1.2.16）会出现问题，如果您有连续的两个，因此以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>中工作所需的。谢谢！ - Eric D. Johnson
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>
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>
2
不应该在同一个元素上同时使用 ng-view 和 ng-include；src（参见templateUrl）应该在你的路由器中进行配置。 - Jakob Jingleheimer
@jacob 那你怎么将它作为路由加载呢？因为我可以让我的视图加载，也可以让我的控制器触发，但它们没有连接，视图是空的。 - Sonic Soul
@SonicSoul 使用ngRouter并将其设置为模板。或者，如果您的意思是在路径中使用路由参数，只需像JavaScript表达式一样使用它：someVar + 'some string'。 - Jakob Jingleheimer
@jacob 我已经使用了ngRouter，但我不知道如何在ng-include中加载该路由。如果我在src中使用路由，它只会加载整个站点而不是视图:(如果我通过相对路径加载它到HTML中，它不会加载视图的控制器。 - Sonic Soul
@SonicSoul，你是在尝试加载一个嵌套在通过ngRouter加载的视图中的模板吗？如果是这样，我认为你提供给src的值应该是项目目录结构中的绝对路径（而不是应用程序路由）。如果你正在尝试使用ngInclude设置路由模板，那么是错误的。除此之外，这已经是6年前的事情了，我可能已经3年多没有使用AngularJS了。 - Jakob Jingleheimer
@jacob 谢谢，当我提供绝对路径时，它确实加载了视图。但是，它不会自动加载控制器。如果在同一绑定中为该视图提供ng-controller，则会触发控制器加载，但它们仍然似乎没有连接（视图为空加载）。 - Sonic Soul
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>
-1

在 ng-build 过程中，可能会出现文件未找到（404）的错误。因此，我们可以使用以下代码

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

而不是，

<div ng-include="'views/transaction/test.html'"></div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接