离子导航按钮不显示

我想在导航栏中使用<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

离子导航按钮不显示

回答

相关问题