離子導航按鈕不顯示

我想在導航欄中使用<ion-nav-buttons>啓用「編輯」按鈕，但它們不顯示。 documentation提到<ion-nav-buttons>需要是<ion-view>的孩子，所以我有點困惑，爲什麼它不工作。我已經讀過人們對抽象視圖內的導航按鈕有問題，但spots.html不是抽象視圖。離子導航按鈕不顯示

下面是導航按鈕，不適用於spots.html。

<ion-view title="Spots"> 
    <ion-nav-buttons side="right"> 
     <button class="button button-clear button-positive">Grid</button> 
    </ion-nav-buttons> 
    <ion-content> 
     <div ng-hide="gridView" class="list"> 
      <a ng-repeat="spot in spots" ui-sref="tab.spot-detail({ id:{{spot.id}} })" class="item item-thumbnail-left"> 
       <img ng-src="{{ spot.thumb_url }}"> 
       <h2>{{ spot.name }}</h2> 
      </a> 
     </div> 
    </ion-content> 
</ion-view>

tabs.html

<ion-nav-bar class="bar-positive"> 
    <ion-nav-back-button class="button-clear"> 
    <i class="ion-chevron-left"></i> 
    </ion-nav-back-button> 
</ion-nav-bar> 

<ion-tabs class="tabs-icon-top tabs-striped tabs-color-positive"> 

    <!-- Spots Tab --> 
    <ion-tab title="Spots" icon="icon ion-ios7-world" href="#/tab/spots"> 
    <ion-nav-view name="tab-spots"></ion-nav-view> 
    </ion-tab> 

    <!-- Upload Tab --> 
    <ion-tab title="Upload" icon="icon ion-ios7-camera" href="#/tab/upload"> 
    <ion-nav-view name="tab-upload"></ion-nav-view> 
    </ion-tab> 

    <!-- Friends Tab --> 
    <ion-tab title="Friends" icon="icon ion-ios7-people" href="#/tab/friends"> 
    <ion-nav-view name="tab-friends"></ion-nav-view> 
    </ion-tab> 

    <!-- Account Tab --> 
    <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account"> 
    <ion-nav-view name="tab-account"></ion-nav-view> 
    </ion-tab> 

</ion-tabs>

而且我的路由器文件的相關部分，app.js

$stateProvider 

    .state('welcome', { 
    url: "/welcome", 
    controller: 'WelcomeCtrl', 
    templateUrl: "templates/welcome.html", 
    data: { 
     requiresLogin: false 
    } 
    }) 

    // setup an abstract state for the tabs directive 
    .state('tab', { 
    url: "/tab", 
    abstract: true, 
    templateUrl: "templates/tabs.html" 
    }) 

    .state('tab.spots', { 
    url: '/spots', 
    views: { 
     'tab-spots': { 
     templateUrl: 'templates/tab-spots.html', 
     controller: 'SpotsCtrl' 
     } 
    }, 
    data: { 
     requiresLogin: true 
    } 
    })

我index.html

<body ng-app="droppin"> 
    <ion-nav-view></ion-nav-view> 
</body>

來源

2015-06-29 Sean

您可以添加index.html的正文部分嗎？離子視圖的幾個聲明可能會影響標題。 – benek

@benek剛添加它。 – Sean

我沒有準確的解釋，但對我來說有什麼作用是：在ion-nav-bar（離開ion-nav-view/ion-view）內部有ion-nav-buttons，並且對於特定的視圖按鈕，我在裏面使用了一個離子標題欄和基本按鈕。 – benek

我通過刪除button-positive類來得到它的工作。顯然，類的混合以及我的導航欄的顏色導致按鈕混合在一起。

來源

2015-08-30 21:58:05 Sean

有關部分當你說「不工作「，對我們來說相當模糊（至少我）。不要說「不可見」，「可見不可點擊」，「可點擊但無效」，「可點擊錯誤效果」等。

我從代碼中可以看到的一個明顯錯誤是ui-sref="tab.spot-detail({ id:{{spot.id}} })"。您應該省略{{}}內部評估。

來源

2015-06-29 03:27:30 Icycool

對不起，我猜我有點含糊。通過「不工作」我的意思是他們沒有出現在導航欄中。對於這個特定的問題，我試圖添加一個清晰的「編輯」按鈕，它沒有顯示出來。感謝您指出另一個錯誤，我不知道您可以忽略'{{}}'。這段代碼仍然有效，所以我認爲它不會影響我的主要問題，我會改變它，讓它知道它是否會影響我的主要問題。 – Sean

離子導航按鈕不顯示

回答

相關問題