ng-include 和 ion-nav-bar 不显示

Question

我在 ion-nav-bar 中使用 ng-include 时遇到了问题。 ng-include(d) ion-nav-bar 代码未显示（但包含在内）。

代码如下：

<ion-view title="test">
    <ng-include src="'partials/header-list.html'"></ng-include>
    <ion-content padding="false">Test</ion-content>
    <ng-include src="'partials/footer-badges.html'"></ng-include>
</ion-view>

partials/header-list.html的内容是：

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button button-clear ion-chevron-left"> Back </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="right"><a href="#/app/home" class="button button-clear"> Home </a></ion-nav-buttons>

这被渲染成：

<ng-include src="'partials/header-list.html'" class=""><ion-nav-bar class="bar-positive bar bar-header nav-bar nav-title-slide-ios disable-user-behavior  invisible">
<ion-nav-back-button class="button button-clear back-button ng-hide"> Back </ion-nav-back-button>
<div class="buttons left-buttons"> </div><h1 ng-bind-html="title" class="title ng-binding"></h1>
<div class="buttons right-buttons"> <span class=""><a href="#/app/home" class="button button-clear"> Home </a></span></div></ion-nav-bar>
<ion-nav-buttons side="right" style="display: none;"></ion-nav-buttons></ng-include>

我可以看到 ion-nav-bar 设置为 class=invisible 并且 ion-navs-buttons 设置为 display:none。

为什么会发生这种情况？当在 ng-include 中使用时，我该怎么做才能显示导航栏？

谢谢 我的意思

Answer 1

根据ArtOfCode 的要求，请在下面找到完整代码。我采用的方法也与 Ionic 团队在 "Navigating Ionic's Headers" 公式中给出的建议相关。

我使用<ion-nav-bar> 进行通用导航，并通过特定的<ion-header-bar> 对该导航应用例外。这种方法的一个例子：

<ion-view hide-nav-bar="true">

  <ion-header-bar align-title="center" class="bar-dark">
    <div class="buttons">
      <a class="button button-icon icon ion-chevron-left" ng-href="#/app/group"> Back</a>
    </div>
    <h1 class="title"></h1>
    <div class="buttons">
      <a class="button button-icon icon ionic-plus" ng-href="#/app/member-create/{{groupid}}"></a>
      <a class="button button-icon icon ionic-minus" ng-href="#/app/member-delete"></a>
    </div>
  </ion-header-bar>

  <ion-content class="has-header">
  </ion-content>

</ion-view>

作为补充说明，我想补充一点，我发现 Angular 指令提供了比我最初设想的使用 ng-include 更好的可重用性方法。学习体验的所有部分:-)

Answer 2

我认为您不希望在 src 属性中使用内部单引号

<ng-include src="partials/header-list.html" class="">...

Answer 3

我偶然发现了同样的问题。 Beta14 应该以某种方式通过覆盖导航栏的新方法来缓解这个问题。在那之前，我正在使用：

<ion-view hide-nav-bar="true">

并改用<ion-header-bar>，它可以毫无问题地包含在内。请注意，它应该用于非标准视图。

一个例子：

<ion-view hide-nav-bar="true>
    <ion-header-bar class="bar-positive">
        <h1 class='title'>
            Hello!
        </h1>
   </ion-header-bar>

   <ion-content class="has-header">
        Content
   </ion-content>
</ion-view>