根据当前状态变化隐藏导航按钮答案

【问题标题】：Hide nav-button depending on the current state change根据当前状态变化隐藏导航按钮
【发布时间】：2016-02-29 09:11:25
【问题描述】：

如何根据当前视图隐藏/显示此按钮？

<ion-nav-buttons side="right">
    <button id="search_button" class="button button-icon  ion-ios-search button-clear"  ng-click="search()">
    </button>
  </ion-nav-buttons>

【问题讨论】：

您的意思是按视图路由吗？该指令是自定义指令吗？你用哪个路由器？ ui-router 还是 angularJS routeProvider？
到不同视图的导航发生在 Ionic Side 菜单中。我也使用角度 routeProvider
太好了，那么$stateChangeSuccess 事件就是您要找的。（或$viewContentLoaded 基本相同...）。如果您有父容器，我的解决方案将适合您。如果你不这样做，我建议你在 body 标记的 html 中添加一个控制器。并在那里处理一些路由；）

标签： angularjs ionic-framework

【解决方案1】：

如果您有一个包含一些视图的父控制器，您可以执行以下操作：

.controller("parentController", function($scope){

   var self = this;

   $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){    
       self.showButton = (toState.name == "yourStateName");
   });

});

HTML：

<div ng-controller="parentController as parentCtrl">
  <ui-view> </ui-view>

  <ion-nav-buttons side="right">
    <button id="search_button" class="button button-icon  ion-ios-search button-clear"  ng-click="search()" ng-if="parentCtrl.showButton">
    </button>
  </ion-nav-buttons>
</div>

【讨论】：

是的，只需稍作改动即可完美运行。我使用了 $scope.showButton 并将 toState 更正为 toState.name
哦，对了，我忘了它是一个对象。已编辑 :) 我建议您使用 as 语法；只需将广告控制器作为 ctrl。因此，您也可以区分您引用的控制器属性

【解决方案2】：

您可能可以向负责此视图的控制器添加一个标志，并在按钮元素上使用 ng-if 或 ng-show/ng-hide 指令。如果没有更多上下文，我无法给出更详细的答案。

【讨论】：

是的，但是如果我有很多视图，那么我必须为每个控制器设置一个标志。虽然我认为这是一种解决方案，但我不能接受它，因为我非常确定有更好的解决方案