使用angularJS的ng-include在离子模板中嵌入ion-header-bar

Question

我已将以下代码添加到我的html模板中：

<div ng-include src="'templates/header.html'"></div>

我的header.html文件包含：

<ion-header-bar align-title="center" class="bar-navigation">
    <p class="center">TEST Include</p>
</ion-header-bar>

它没有渲染离子标题栏。

有人知道如何让这个工作吗？

Answer 1

根据：https://docs.angularjs.org/api/ng/directive/ngInclude

上的ngInclude文档

当src用作元素时，您使用ng-include。例如

<ng-include src="templates/header.html"></ng-include>

否则，请提供模板位置作为ng-include属性的值。

<div ng-include="templates/header.html"></div>

此外，从模板源中删除单引号，它们不是必需的。

Answer 2

将文件header.html重命名为header.tpl.html解决了我的问题。

那是因为gruntfile.js仅包含tpl.html文件。

虽然看不到包含的离子导航条，但我想这是一个不同的问题。

感谢@Andrew的帮助。