带有箭头切换的 Angular Material MenuBar 无法正确切换

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

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

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