Onsend перезагрузить меню из контроллера, чтобы скрыть пункты меню

Question

Onsend перезагрузить меню из контроллера, чтобы скрыть пункты меню

0

У меня есть скользящее меню с некоторыми элементами списка. Я хочу изменить видимость некоторых элементов в соответствии с подписанным типом пользователя.

У меня есть 3 контроллера: LoginController, AppController, и я просто сделал MenuController.

Это мое меню:

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

При входе в систему пользователь сначала загружает контроллер меню, поэтому функция init уже выполнена. Затем, когда пользователь вводит ключи в свои учетные данные и нажимает LOGIN, я использую службу для установки типа лицензии в переменной, но затем, когда приложение загружается, это уже слишком поздно.

Как исправить эту проблему, поэтому сразу после входа в систему меню снова инициализируется, и ng-hide корректно скрывает/показывает все необходимые элементы?

Laureant 01 июнь 2016, в 14:48

Источник

Теги:

javascript

jquery

angularjs

cordova

onsen-ui

2 ответа

Ещё вопросы

Ilia Yatchev · Answer 1 · 2016-06-02T02-50-00.000Z

Я вижу два способа решить эту проблему:

Как исправить эту проблему, поэтому сразу после входа в систему меню снова инициализируется, и ng-hide корректно скрывает/показывает все необходимые элементы?

Это первый способ - после входа в систему вы можете просто перезагрузить меню menu menu.setMenuPage('menu.html') или что-нибудь подобное, которое будет явно внести изменения.
Альтернативно, поскольку вы говорите, что

Я использую службу для установки типа лицензии в переменной

Вы можете просто сделать эту переменную видимой для представления и использовать ее для вашего ng-show/ng-hide. Здесь просто Демо, чтобы увидеть его в действии.

В основном, что мы получаем от угловой привязки двухсторонних данных - мы можем даже переключать значение между true и false и элементы будут соответственно обновляться.

Выбор ваш. Я думаю, что второй чувствует себя ближе к "Угловому пути", но если вы предпочитаете явно устанавливать то, что тоже прекрасно, так как это сработало для нас задолго до того, как был изобретен Угловой.

Vu Quyet · Answer 2 · 2016-06-02T00-48-00.000Z

Вам нужно написать массив menuList как свойство области, в котором есть поле, например showMenu. И функция обновления вашего поля меню (showMenu) после входа в систему

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

}

Затем напишите ng-repeat, чтобы отобразить список:

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