ng-include 编译为注释

Question

我有一个 Angular 应用程序，并且想在模板中添加其他作为 div。 ng-include 似乎是一个完美的选择。

在 main.html 中

<div id="page-wrapper">
<div ng-include src="'/partials/module.html'"></div>
</div>

在module.html中

<div class="module">
<h1>Module</h1>
</div>

所有文件都位于应用程序的 partials 文件夹中。

运行此程序时，在 html 代码中的位置，我得到 <!-- ngInclude: -->，并将 main.html 中的 div 替换为同样支持的 ng-include 标记，它编译为 <!-- ngInclude: undefined -->。

有谁知道可能是什么问题？

Answer 1

我遇到了同样的问题，上面提到的解决方案都没有帮助我解决这个问题，它吃了我整整两天。终于在this link的帮助下想通了。

完成这项工作的解决方案还需要以下两个特征：

1. 部分 html 应包含在单引号中
2. 其次，需要提及文件的完整路径，即使该文件位于同一位置。

例如：

ABC
|
---- DEF
      |
      --- abc.html
      --- partial.html

所以如果 abc.html 有 ng-include 语法，那么它应该如下所示

<div ng-include="'ABC/DEF/partial.html'"></div>
                     OR
<ng-include src="'ABC/DEF/partial.html'"></ng-include>

Answer 2

我遇到了确切的问题，编译器可能找不到您提供的 src 路径。 删除路径中的第一个 / 。编译器会自动将 / 附加到根上下文并尝试查找路径。它对我有用。

<div ng-include src="'/partials/module.html'"></div> 

替换为

<div ng-include src="'partials/module.html'"></div>

Answer 3

几个小时后，我为自己解决了这个问题，就是在双引号之间使用单引号。

<!--it will not work-->
<ng-include src="views/header.html"></ng-include>

<!--it will work :)-->
<!--Difference is single quotes along with double quotes around src string-->
<ng-include src="'views/header.html'"></ng-include>

Answer 4

这一定是范围问题。确保$scope 对象被正确传递，并且不要忘记在您的主页中包含与partial 相关的控制器和服务！

Answer 5

你只在使用 ng-include 作为元素时使用 src=""：

<ng-include src="'/partial.html'"></ng-include>

当使用 ng-include 作为属性时，您将部分 URL 放在属性本身中：

<div ng-include="'/partial.html'"></div>

请参阅https://docs.angularjs.org/api/ng/directive/ngInclude 了解这两个用例。