Question

我想在ng-click上隐藏我的导航栏，但不知何故转换不起作用。

你能帮我理解这个问题吗？

.nav-bar{
  opacity: 1;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  -webkit-transition-property: all !important;
  transition-property: all !important;
}
.bar-header-fade-away{
    opacity: 0;
    -webkit-transition: all linear 0.25s;
  transition: all linear 0.25s;
  transition-property: all !important;
  -webkit-transition-property: all !important;
}

我的控制器

$scope.toggleUI = function(){
    $scope.showui = !$scope.showui;
    $rootScope.fadeHeader = !$rootScope.fadeHeader;
}

我的观点

<ion-nav-bar align-title="center" class="nav-bar bar-purple" ng-show="fadeHeader">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

Answer 1

你过度复杂的事情。要在点击时隐藏导航栏，您的视图应该是：

<ion-nav-bar align-title="center" class="nav-bar bar-purple" ng-show="fadeHeader" ng-click="showHideHeader()">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

然后在控制器中：

$scope.fadeHeader = false;

$scope.showHideHeader = function() {
    $scope.fadeHeader = !$scope.fadeHeader;
};

请记住，当您点击它并隐藏时，如果没有重新加载页面，就无法收回它。

ng-click上的离子隐藏导航栏

1 个答案: