Строка меню углового материала со стрелкой не переключается правильно

0

Я использую Angular Material MenuBar и пытаюсь добавить стрелку, так что, когда меню открыто, стрелка вверх и переключается вниз при закрытии.

Я могу использовать ng-show чтобы вызвать его при нажатии. Однако, если пользователь нажимает на изменение фокуса, закрывая меню (без повторного щелчка по меню) стрелка теперь находится в неправильном состоянии и не переключается обратно.

Я также попробовал ng-blur который не работал так, как я надеялся.

Я думаю, мне нужно посмотреть событие закрытия в меню, но я не уверен, что это лучший способ сделать это с помощью md-menu-bar. Любые предложения по наилучшему способу реализации этой стрелки переключения?

  <md-menu-bar id="user-menu">
    <md-menu md-position-mode="left bottom">
      <md-button class="user-button" ng-click="$mdOpenMenu($event); model.UserMenuOpen = !model.UserMenuOpen;" aria-label="User Settings">
          <span class="username" hide-xs ng-if="profile">{{profile.firstName}} {{profile.lastName}}</span>

          <md-icon md-font-icon="icon-chevron-down" class="icon s16" ng-show="model.UserMenuOpen"></md-icon>
          <md-icon md-font-icon="icon-chevron-up" class="icon s16" ng-show="!model.UserMenuOpen"></md-icon>          
        </div>
      </md-button>

      <md-menu-content>
        <md-menu-item>
          <md-icon md-font-icon="icon-cart-outline" class="icon"></md-icon>
          <md-button>Cart</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-icon md-font-icon="icon-account" class="icon"></md-icon>
          <md-button>Profile</md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
  </md-menu-bar>
Теги:
angular-material

1 ответ

0
Лучший ответ

Решается через CSS, используя класс md-open.

#user-menu .arrow-up
{
  display: none; 
}

#user-menu md-menu .arrow-down
{
  display: inline; 
}

#user-menu md-menu.md-open .arrow-up
{
  display: inline; 
}

#user-menu md-menu.md-open .arrow-down
{
  display: none; 
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню