angularjs - ng-include 编译为注释

Question

我有一个角度应用程序，并且想在模板中添加其他作为 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

仅在使用 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。

Answer 2

几个小时后，我为我解决了这个问题，这完全是关于在双引号之间使用单引号。

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

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

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

用。。。来代替

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

Answer 4

我陷入了同样的问题，上面提到的解决方案都没有帮助我解决问题，它吃了我整整两天。最后我在这个链接的帮助下想通了。

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

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 5

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