在导航条中动态添加Ionic中的按钮

时间:2021-07-16 22:58:41

I have a nav bar and I want to add a save button to the nav bar for only one screen. I was reading the blogs and everyone was saying how you declare your buttons in the view and don't access them in a controller. That is all well and good but I have to imagine people still want to hide and show nav buttons. Am I missing something?

我有一个导航条,我想在导航条上添加一个保存按钮,只需要一个屏幕。我正在阅读博客,每个人都在说你如何在视图中声明你的按钮,并且在控制器中不访问它们。这一切都很好,但我不得不想象人们仍然想隐藏和显示导航按钮。我遗漏了什么东西?

<body ng-app="App">
      <!-- The nav bar that will be updated as we navigate -->
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>    </ion-nav-back-button>
        <ion-nav-buttons side="right">
            <button id="saveButton" class="button button-clear">Save</button>
        </ion-nav-buttons>

      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
  </body>

2 个解决方案

#1


27  

You can add buttons on left or right side in navigation bar from any screen containing <ion-view>.Like

您可以在任何包含 .Like的屏幕上,在导航条的左边或右边添加按钮

<ion-view title="New Screen">
    <ion-nav-buttons side="primary">
        <button class="button" ng-click="doSomething()">
            New Button
        </button>
    </ion-nav-buttons>
</ion-view>

So this "New Button" will only come for "New Screen".

所以这个“新按钮”只会出现在“新屏幕”上。

#2


1  

In case you just want to hide right nav button on that perticular. You can do it with

如果你只是想把导航按钮藏在上面。你可以这么做

<ion-nav-buttons side="right" >
</ion-nav-buttons>

#1


27  

You can add buttons on left or right side in navigation bar from any screen containing <ion-view>.Like

您可以在任何包含 .Like的屏幕上,在导航条的左边或右边添加按钮

<ion-view title="New Screen">
    <ion-nav-buttons side="primary">
        <button class="button" ng-click="doSomething()">
            New Button
        </button>
    </ion-nav-buttons>
</ion-view>

So this "New Button" will only come for "New Screen".

所以这个“新按钮”只会出现在“新屏幕”上。

#2


1  

In case you just want to hide right nav button on that perticular. You can do it with

如果你只是想把导航按钮藏在上面。你可以这么做

<ion-nav-buttons side="right" >
</ion-nav-buttons>