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

【问题标题】：What is the correct syntax of ng-include?ng-include 的正确语法是什么？
【发布时间】：2012-12-06 06:41:50
【问题描述】：

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

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

但在official docs 中，它说要使用

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

然后down the page显示为

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

我的 sn-p 不是很多代码，但它有很多事情要做；我在Dynamically load template inside ng-repeat 中读到这可能会导致问题，因此我将sidepanel.html 的内容替换为仅单词foo，但仍然没有。

我也试过像这样直接在页面中声明模板：

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

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

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

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

【问题讨论】：

标签： javascript html angularjs syntax include

【解决方案1】：

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

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

Source

【讨论】：

是的，前几天我被这个咬了。有点相关的答案stackoverflow.com/questions/13811948/…
这样做的原因是 ng 标签中的任何字符串实际上都被评估为角度表达式。 '' 告诉它这是一个字符串表达式。
@Gepsens：一旦你知道它就有意义了。如果文档明确提到它会很好。
我同意，我们肯定需要 Angular 的文档工作和布局系统。
说真的。荒谬。你会认为他们会提到它是一种表达方式，尽管它看起来很明显。

【解决方案2】：

    <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="'...'" 语法看起来确实更好。
所以我假设 ng-include 在评论格式中不存在？

【解决方案3】：

对于那些故障排除，重要的是要知道 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 在同一目录中。
在使用 Laravel 并将结构放置在公共文件夹 (public/app/templates/includes) 的情况下，调用文件是 (public/app/templates/index.php) 所需的包含路径成为（app/templates/includes/filetoinclude.php）。我无法与工作联系起来。

【解决方案4】：

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

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

实际上，如果您将它用于一个中继器，它会起作用，但不会用于其中 2 个！ Angular (v1.2.16) 如果你一个接一个地拥有其中的 2 个，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> 工作所需要的。谢谢！

【解决方案5】：

也许这对初学者有帮助

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

【讨论】：

【解决方案6】：

这对我有用：

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

完整的 div：

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

【讨论】：

你不应该在同一个元素上组合ng-view和ng-inclue； src（见templateUrl）应该在你的路由器中配置。
@jacob 那么您将如何将其加载为路线？因为我可以让我的视图加载，我可以让我的控制器触发，但它们没有连接，视图加载为空
@SonicSoul 使用 ngRouter 并将其设置为模板。或者，如果您的意思是在路径中使用路由参数，只需像 JavaScript 表达式一样使用它：someVar + 'some string'
@jacob 我已经在使用 ngRouter，但我不知道如何在 ng-include 中加载该路由。如果我在 src= 中使用路由，它只会加载整个站点而不仅仅是视图 :(如果我通过 html 的相对路径加载它，它不会用视图加载控制器
@SonicSoul 您是否尝试加载嵌套在通过 ngRouter 加载的视图中的模板？如果是这样，我认为您提供给 src 的值应该是项目目录结构中的绝对路径（而不是应用程序路由）。如果您尝试使用 ngInclude 设置路由模板，那就错了。除此之外，这是 6 年前的事了，我大概 3 年多没用过 AngularJS了。

【解决方案7】：

试试这个

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

【讨论】：

【解决方案8】：

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

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

插入，

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

【讨论】：