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

我试图在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>

我的代码片段不是很多代码，但它有很多内容;我在在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)。

319221 次浏览
小开
最佳答案

你必须在双引号内单引号src字符串:

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

Source .

小开

为了解决这些问题，重要的是要知道ng-include要求url路径来自应用程序的根目录，而不是来自与partial.html所在目录相同的目录。(而partial.html是可以找到内联ng-include标记标记的视图文件)。

例如:

< p >正确的: div ng-include src=" '/views/partials/tabSlides/add-more.html' ">

.html < p >不正确: Div ng-include src=" 'add-more.html' ">

.html
小开

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

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

实际上，如果你对一个中继器这样使用，它会工作，但对两个就不行了! Angular (v1.2.16)会因为某些原因而崩溃，如果你一个接一个地有两个这样的div，所以用xhtml之前的方式关闭div会更安全:

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

小开 
    <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的双引号中使用单引号

小开

也许这对初学者有帮助

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

这招对我很管用:

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

完整的div:

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

试试这个

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

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

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

本月,

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

提交答案