角材 - メニューを閉じるときにmd-selectを閉じる/隠すにはどうしたらいいですか？

Question

md-menu-itemの要素を私のmd-menuに使用しています。メニューはボタンでアクティブになります。すべて正常に動作し、すべてデフォルトの角度jを使用します。

各md-menu-itemの中にはmd-select個の入力があります。私はボタンをクリックを経由して、メニューを開くと

... 

<md-menu-item> 
    <md-input-container> 
     <label>My Label</label> 
     <md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)"> 
      <md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'"> 
       {{foo.name}} 
      </md-option> 
     </md-select> 
    </md-input-container> 
</md-menu-item> 

... 

- 私は何も選択しないと私は<md-select>（画面上の任意の場所に）のオフにクリックした場合、それはすべてが順調である&なければならないようmd-menuが消える：それはこのようになります。

<md-select>要素の1つをクリックし、画面のどこかをクリックすると<md-menu>が閉じますが、まだ<md-select>要素が表示されます。

メニューアイテム内の要素を「入れ子にする」方法があるので、メニュー項目を閉じるとすべての子要素も閉じます。

Here is a codepen example私が見ているもの。

ありがとうございます！

Answer 1

クリックすると、対応する要素を閉じるのに使用されるmenuとselectの背景が問題です。だから角度のある素材です。これらの背景のz-indexを変更することができます。

私は（あなただけではこれらの背景のためのzインデックスを変更することができます参照してください唯一の簡単な修正だ

$z-index-menu: 100 !default; 
$z-index-calendar-pane: 100 !default; 
$z-index-select: 90 !default; 

：デフォルトはvariables.scssファイル（あなたが最初にそれを閉じて、メニューの背景には、選択の上で見ることができるように）で指定されていますあなたのCSS）。

Answer 2

ボックスの外側をクリックするとmd-selectを非表示にします。私は'$mdSelect.hide()'を使ってmd-selectドロップダウンメニューを閉じます。私はちょうど私のメインコントローラに次の3行を入れます。

$(document).bind('click', function (event) { 
     $mdSelect.hide(); 
    });