ng-include不顯示ion-nav-bar

我遇到了在ion-nav-bar中使用ng-include的問題。 ng-include（d）ion-nav-bar代碼不顯示（雖然包含它）。ng-include不顯示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>

泛音的內容/報頭-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 =不可見，ion-navs-buttons設置爲display：none。

爲什麼會這樣，我能做些什麼來獲得在使用時顯示的導航欄NG-包括哪些內容？

感謝 Meint

來源

2014-12-13 Meint

我不認爲你想在你的src屬性內的單引號

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

來源

2014-12-13 21:24:05

是的，這需要參見[angularjs文檔（https://docs.angularjs.org/api/ng/directive/ngInclude）和本[計算器後（HTTP： //stackoverflow.com/questions/13943471/angularjs-ng-include） – Meint 2014-12-15 16:24:31

我在同樣的問題絆倒了。 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>

來源

2015-03-05 15:20:13 nicolov

你可能要張貼的全套代碼你用過......哪裏了'<離子頭吧>'去？ – ArtOfCode 2015-03-05 15:31:47

按照要求通過ArtOfCode請在下面找到完整的代碼。我採取的方法也與"Navigating Ionic's Headers"公式中給出的Ionic團隊的建議相關。

我使用<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-包括最初由自己設想。斜塔體驗的一部分:-)

來源

2015-04-01 09:29:37 Meint

ng-include不顯示ion-nav-bar

回答

相關問題