Angular Material 带箭头切换的菜单栏无法正确切换

Question

我正在使用 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>

Answer 1

通过 CSS 使用 md-open class 解决。

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

Angular Material 带箭头切换的菜单栏无法正确切换

Angular Material MenuBar with arrow toggle doesn't toggle correctly

angularjs

angular-material