Onsend Menü vom Controller neu laden, um die Menüoptionen zu verbergen

Question

Ich habe ein Sliding-Menü mit einigen Listenelementen. Ich möchte die Sichtbarkeit einiger Elemente gemäß dem angemeldeten Benutzertyp ändern.

Ich habe 3 Controller: LoginController, AppController und ich habe gerade einen MenuController gemacht.

Das ist mein Menü:

<ons-template id="menu.html"> 
    <ons-page ng-controller="menuController" ng-init="initMenu()"> 
     <ons-list> 
     <ons-list-item modifier="tappable" onclick="menu.setMainPage('navigator.html', {closeMenu: true})"> 
      <ons-icon icon="ion-home" style="padding-bottom:2px;"></ons-icon> Home 
     </ons-list-item> 
     <ons-list-item modifier="tappable" ng-hide="{{isTypeA}}" onclick="menu.setMainPage('Page1.html', {closeMenu: true})"> 
      <ons-icon icon="ion-clipboard" style="padding-bottom:2px;"></ons-icon> Page 1 
     </ons-list-item> 
     <ons-list-item modifier="tappable" ng-hide="{{isTypeA}}" onclick="menu.setMainPage('Page2.html', {closeMenu: true})"> 
      <ons-icon icon="ion-loop" style="padding-bottom:2px;"></ons-icon> Page 2 
     </ons-list-item> 

     <ons-list-item modifier="tappable" ng-hide="{{isTypeA}}" onclick="menu.setMainPage('Page3.html', {closeMenu: true})"> 
      <ons-icon icon="ion-compose" style="padding-bottom:2px;"></ons-icon> Page 3 
     </ons-list-item> 
     <ons-list-item modifier="tappable" onclick="menu.setMainPage('Page4.html', {closeMenu: true})"> 
      <ons-icon icon="ion-gear-a" style="padding-bottom:2px;"></ons-icon> Settings 
     </ons-list-item> 
     </ons-list> 
    </ons-page> 
</ons-template> 

Wenn in einem Benutzer Unterzeichnung die Menüs Controller lädt zuerst, so wird die init-Funktion bereits getan. Wenn der Benutzer dann seine Anmeldeinformationen eingibt und LOGIN drückt, verwende ich einen Dienst, um den Lizenztyp in eine Variable zu setzen, aber wenn die App geladen wird, ist es bereits zu spät.

Wie behebt man dieses Problem, also gleich nach dem Login, wird das Menü wieder initialisiert und das ng-hide wird alle notwendigen Elemente korrekt verstecken/anzeigen?

Answer 1

Sie benötigen einen MenuList Array als Bereich Eigenschaft zu schreiben, das Feld enthalten, wie showMenu und eine Funktion Menüfeld (showMenu) zu aktualisieren, nachdem

function menuController ($scope){ 
    // init menu 
    $scope.menuList = [{ 
     showMenu: true, 
     menuPage: 'Page1.html', 
     ... 
    }, 
    { showMenu: true, 
     menuPage: 'Page2.html', 
     ... 
    } 
    , ...]; 

    // call this function after logging in 
    function updateMenuAfterLogin() { 
     menuList.foreach (function(menu){ 
      if ('someCondition') { 
       menu.showMenu= false; 
      } 
     } 
    } 

} 

schreiben Sie dann eine ng-Wiederholung in der Anmeldung zu machen Sie Ihre Liste:

 <ons-list> 
     <ons-list-item modifier="tappable" ng-repeat= "menuItem in menuList" ng-hide="{{menuItem.show}}" onclick="menu.setMainPage({{menuItem.menuPage}}, {closeMenu: true})"> 
      <ons-icon icon="ion-home" style="padding-bottom:2px;"></ons-icon> Home 
     </ons-list-item> 
    </ons-list> 

Answer 2

ich sehe zwei Möglichkeiten, dieses Problem zu lösen:

1. Wie behebt man dieses Problem, also gleich nach der Anmeldung wird das Menü wieder initialisiert und das ng-hide wird alle notwendigen Elemente korrekt verstecken/anzeigen?

   Dies ist der erste Weg - nach der Anmeldung erhalten Sie können nur die Menüseite menu.setMenuPage('menu.html') oder ähnliches nachladen, die explizit die Änderung vornehmen wird.
   
   

2. Alternativ da Sie sagen, dass

   ich einen Dienst verwenden, den Lizenztyp setzen in einer Variablen

   Sie könnten nur machen, dass Variable sichtbar für die Ansicht und Verwendung es für Ihre ng-show/ng-hide. Hier ist eine einfache Demo, um es in Aktion zu sehen.

   Im Grunde ist das, was wir aus Winkels 2-Wege-Datenbindung bekommen - wir können sogar den Wert zwischen true und false umschalten und die Artikel werden entsprechend aktualisiert.

Sie haben die Wahl. Ich denke, der zweite fühlt sich näher an "The Angular Way", aber wenn Sie es vorziehen, Dinge explizit zu setzen, ist das auch in Ordnung, denn das hat lange vor der Erfindung von Angular funktioniert.