帶箭頭切換的角度材質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

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