Bedingt ausblenden Menü Schaltfläche im ionischen Framework außerhalb <ion-view>

Question

Im ionischen Rahmen versuche ich die Menüschaltfläche bedingt zu verstecken. Aus anderen Gründen musste ich das Menü in einen eigenen Controller aufteilen (ich möchte das Menü und die Kopfzeile bei einer Aktualisierung nicht komplett neu rendern), so dass die Kopfzeile nicht in ion-view angezeigt wird. Ich habe einen Watcher für die Bedingungsvariable (ein Stateparam) im Controller des Headers erstellt. Das Konsolenprotokoll gibt die bedingte Variable korrekt aus, aber die Ansicht wird nicht aktualisiert (die Menüschaltfläche wird immer angezeigt).

Dies ist die Vorlage:

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

Und in der Steuerung:

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

Gibt es einen einfacheren Weg? Oder verpasse ich hier etwas?

Answer 1

Ein bisschen schmutzig Abhilfe wäre die Tasten eine ID zu geben und dann jqlite nutzen sie, wie dies in der Steuerung zu verbergen:

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

Answer 2

Sie das hide-back-button Attribut auf dem <ion-view> Element verwenden können, wenn das erklären Ansicht sollte die Zurück-Schaltfläche standardmäßig ausblenden.

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

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

Answer 3

Einstellung hide-back-button auf false nicht für mich arbeiten. in meinem Fall war jedoch die einfachere Lösung

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

innen <ion-view> zu haben. Dies ist nur eine leere linke Navigationsschaltfläche enthalten. Das hat den Trick für mich gemacht.

Answer 4

Es kann in einer einfachen Art und Weise erfolgen:

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

und auf den spezifischen Seiten, auf denen Sie das Menü und Navigationsleiste ausblenden möchten, lassen Sie Ihre Login-Seite sagen (in Ihrem Login-Controller), geben Sie einfach - Vergessen Sie nicht, bestimmte Objekte in die Controller-Funktion einzubeziehen.

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