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

Question

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

这是模板:

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

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

Answer 1

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

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

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

Answer 2

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

angular.element(document.querySelector('#back-button')).addClass('hidden');