404

我试图在 中包含一个 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>

我的代码片段不是很多代码，但它有很多事情要做；我在Dynamically load template insideng-repeat中读到了可能会导致问题的内容，所以我sidepanel.html只用 word替换了 的内容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）。

4

8 回答 8

780

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

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

来源

于 2012-12-19T00:11:08.883 回答
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 记得在双引号中使用单引号

于 2014-06-23T13:59:47.540 回答
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'">

于 2013-11-16T19:39:29.313 回答
10

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

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

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

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

于 2014-05-29T06:55:08.450 回答
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>
于 2014-09-09T21:43:33.200 回答
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>
于 2014-09-12T21:12:28.383 回答
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>
于 2016-02-15T11:20:15.093 回答
-1

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

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

安装， 

<div ng-include="'views/transaction/test.html'"></div>
于 2019-01-25T04:38:01.620 回答