使用 angularJS 的 ng-include 在 ionic 模板中嵌入 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>

它没有渲染 ion-header-bar。

请问有人知道如何让它工作吗？

Answer 1

根据 ngInclude 文档，网址为：https://docs.angularjs.org/api/ng/directive/ngInclude

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

<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 的帮助。