首页 文章

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

提问于
浏览 次
5

在离子框架中，我试图有条件地隐藏菜单按钮 . 由于其他原因，我不得不在自己的控制器中拆分菜单（我不想在刷新时完全重新渲染菜单和 Headers 栏），因此 Headers 不在离子视图中 . 我在 Headers 的控制器中创建了条件变量（状态参数）的观察器 . 控制台日志正确输出条件变量，但视图未更新（菜单按钮始终显示） .

这是模板：

<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>

在控制器中：

$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");
            });
        }
    });

有没有更简单的方法？或者我在这里遗漏了什么？

angularjs ionic-framework

4 回答

  • 1

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

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

    <ion-view hide-back-button="true">
  <!-- view contents -->
</ion-view>
    回复于
  • 1

    有点肮脏的解决方法是给这些按钮一个id，然后使用jqlite在控制器中隐藏它们：

    angular.element(document.querySelector('#back-button')).addClass('hidden');
    回复于
  • 7

    将 hide-back-button 设置为false对我不起作用 . 但是，在我的情况下，更容易的解决方案是

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

    在 <ion-view> 内 . 这只是包含一个空的左侧导航按钮 . 这对我有用 .

    回复于
  • 0

    它可以通过简单的方式完成：

    <ion-side-menus enable-menu-with-back-views = "true">

    在您要隐藏菜单和导航栏的特定页面上，假设您的登录页面（在登录控制器内），只需键入 - 不要忘记在控制器功能中包含指定的对象 .

    $scope.$on('$ionicView.beforeEnter', function (event) {
$scope.$root.showMenuIcon = false;
$ionicSideMenuDelegate.canDragContent(false);
});

$scope.$on('$ionicView.beforeLeave', function (event) {
  $scope.$root.showMenuIcon = true;
  $ionicSideMenuDelegate.canDragContent(true);
});
    回复于

相关问题