关于JavaScript：ng-include的正确语法是什么？


What is the correct syntax of ng-include?

我试图在EDCOX1的0内包含一个HTML片段，但是我不能得到包含的工作。似乎EDOCX1的1语法的语法不同于以前的用法：我看到很多例子。

1
 

但在官方文件中，它说

1
 

但在页面下方显示为

1
 

不管怎样，我试过了

1
 
1
 
1
<ng-include src="views/sidepanel.html"></ng-include>
1
<ng-include="views/sidepanel.html"></ng-include>
1
<ng:include src="views/sidepanel.html"></ng:include>

我的代码片段不是很多，但它有很多进展；我在ng-repeat中动态加载模板，这可能会导致问题，所以我用foo这个词替换了sidepanel.html的内容，但仍然没有。

我还尝试在页面中直接声明模板，如下所示：

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

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

我的页面包含了更多内容，但现在我将其简化为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
    <!-- views/main.html -->
    <header>
        Blah
    </header>
   
        <section class="panel"> <!-- will have ng-repeat="panel in panels" -->
           
        </section>
    </article>
<!-- index.html -->
</body>
</html>

头会呈现，但我的模板不会。我在控制台或节点中没有错误，如果我在dev tools中单击src="views/sidepanel.html"中的链接，它会带我到我的模板(并显示foo)。

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

1
 

来源

相关讨论

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

或

1
 

或

1
 

要记住的要点：

-->SRC中没有空格

>记住在SRC的双引号中使用单引号

相关讨论

对于这些故障排除，重要的是要知道ng include要求URL路径来自app根目录，而不是来自partial.html所在的同一目录。(而partial.html是可以找到内联ng include标记的视图文件)。

例如：

Correct:
div ng-include src=" '/views/partials/tabSlides/add-more.html'">

Incorrect:
div ng-include src=" 'add-more.html'">

相关讨论

也许这对初学者有帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
   
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
   
   
    <script src="angular.min.js">
  </body>
</html>

对于那些从一个部分中寻找最短可能的"项目渲染器"解决方案的人，因此ng repeat和ng的组合包括：

事实上，如果你像这样使用它作为一个中继器，它将工作，但不会为2个中继器！Angular(v1.2.16)会因为某些原因而发疯，如果您有两个这样的一个接一个，那么以XHTML之前的方式关闭DIV更安全：

这对我很有用：

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

完全div：

1
 
相关讨论

在NG构建中，文件未找到(404)发生错误。所以我们可以用下面的代码

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

的，

1
 

试试这个

1
2
3
4
5
6
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function (response) {
        $scope.names = response.data.records;
    });
});