angularjs - 有条件地隐藏 <ion-view> 之外的 ionic 框架中的菜单按钮

标签 angularjs ionic-framework

在 ionic 框架中,我试图有条件地隐藏菜单按钮。由于其他原因,我不得不在自己的 Controller 中拆分菜单(我不想在刷新时完全重新渲染菜单和标题栏),因此标题不在 ionic View 中。我在标题的 Controller 中的条件变量(一个 stateparam)上创建了一个观察者。控制台日志正确输出条件变量,但 View 未更新(菜单按钮始终显示)。

这是模板:

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7">
            <ion-nav-back-button ng-if="!isHome" class="button-clear"><i class="icon ion-ios7-arrow-back"></i>Back</ion-nav-back-button>
            <button ng-if="isHome" menu-toggle="left" class="button button-icon icon ion-navicon"></button>
            <h1 class="title">Title</h1>

        </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>

...
</ion-side-menus>

在 Controller 中:
$scope.$watch(function(){
    return $stateParams.contentUrl;
},
    function(newVal){
        console.log(newVal);
        if(!newVal || newVal === 'someParam'){
            $timeout(function(){
                $scope.$apply(function(){
                    $scope.isHome = true;
                });
                console.log("home");
            });
        } else {
            $timeout(function(){
                $scope.$apply(function(){
                    $scope.isHome = false;
                });
                console.log("not home");
            });
        }
    });

有更容易的方法吗?还是我在这里遗漏了什么?

最佳答案

您可以使用 hide-back-button <ion-view> 上的属性元素来声明该 View 是否应该默认隐藏后退按钮。

http://ionicframework.com/docs/nightly/api/directive/ionView/

<ion-view hide-back-button="true">
  <!-- view contents -->
</ion-view>

关于angularjs - 有条件地隐藏 <ion-view> 之外的 ionic 框架中的菜单按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26868208/

相关文章:

javascript - 多元素响应轮播

javascript - 我们可以在 AngularJS 应用程序中动态使用指令吗

android - 找不到 'ANDROID_HOME' 环境变量

node.js - 错误运行 npm i 时发生错误(退出代码 1): Ionic Error

android - Ionic - 错误 : Failed to fetch plugin cordova-plugin-statusbar@https://github. com/apache/cordova-plugin-statusbar.git 通过注册表

javascript - 使用相同功能的 Controller

javascript - 在 Angular 中更改状态时如何停止运行指令代码

angularjs - 使用 cypress 选择下拉列表项

javascript - 将 ng-model 与 ng-options 结合使用,将 Restangular 与 AngularJS 结合使用

java - ionic 无法构建android