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>

所有文件都存在于应用的部分文件夹中。

运行此操作时，在html代码中的位置，我得到，并用main支持的ng-include标记替换main.html中的div，它会编译为。< / p>

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

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

我陷入了同一问题，上面提到的解决方案都没有帮助我解决问题，并且整整花了我两天时间。最后，我在this link的帮助下找到了答案。

解决此问题的方法还需要满足以下两个特征：

部分html应包含在单引号中
即使文件位于同一位置，也需要提及文件的第二个完整路径。

例如：

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对象正确传递，并且不要忘记在主页中包含与partial相关的控制器和服务！

ng-include编译成评论

5 个答案: