Question

我在离子导航栏中使用ng-include时遇到了问题。 ng-include（d）离子导航条代码不显示（虽然包括在内）。

代码如下：

<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中使用导航栏，我该怎么办？

由于 Meint

Answer 1

根据ArtOfCode的要求，请查看下面的完整代码。我采用的方法也与"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>

作为补充说明，我想补充一点，我发现角度指令提供了比使用我自己最初设想的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>

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

3 个答案: