角度のある材質矢印トグル付きのメニューバーが正しく切り替わらない

Question

角度付きの材質のメニューバーを使用していて、矢印のトグルを追加しようとしているため、メニューが開いているときに矢印が上になり、閉じられるとトグルします。

ng-showをクリックするとトリガーすることができます。しかし、ユーザーがフォーカスを変更してメニューを閉じると（メニューを再クリックせずに）、矢印が間違った状態になり、戻ってこないようになります。

また、ng-blurを試してみましたが、私が望んでいたように動作しませんでした。

私はメニューでcloseイベントを見る必要があると思うが、私は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; 
}