删除多个 MD 菜单容器答案

【问题标题】：Remove multiple MD menu containers删除多个 MD 菜单容器
【发布时间】：2018-05-17 19:09:13
【问题描述】：

我有一个 AngularJS 1.6/Typescript 项目，其中有一个 Material Design 菜单元素。在菜单元素中，我有一个带有多个选项的选择。

如果我单击打开菜单，然后单击选择，然后在选择元素之外，仅删除菜单容器。因为菜单的 md-backdrop 元素的 z-index 比 select 元素的 md-backdrop 高。

我希望能够通过单击删除菜单和选择容器。

<md-menu>
    <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
      qq
    </md-button>
    <md-menu-content width="4">
      <md-menu-item>
        <md-button>
            yy
        </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button>
            zz
          </md-button>
      </md-menu-item>
      <md-menu-divider></md-menu-divider>
      <md-menu-item>
        <md-button>
          xx
        </md-button>
      </md-menu-item>
      <md-input-container>
        <label>Status</label>
        <md-select ng-model="ctrl.userState">
          <md-option><em>None</em></md-option>
          <md-option>
            Something
          </md-option>
          <md-option>
            Something
          </md-option>
          <md-option>
            Something
          </md-option>
          <md-option>
            Something
          </md-option>
        </md-select>
      </md-input-container>
    </md-menu-content>
  </md-menu>

【问题讨论】：

标签： angularjs material-design

【解决方案1】：

您需要使用选择吗？为什么不使用第二个菜单？

示例： https://codepen.io/anon/pen/LmXOOj

<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-cloak="" ng-app="MyApp">

  <md-menu>
    <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
      qq
    </md-button>
    <md-menu-content width="4">
      <md-menu-item>
        <md-button>
            yy
        </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button>
            zz
          </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button>
          xx
        </md-button>
      </md-menu-item layout="row">
            <md-menu>
    <md-button aria-label="Open interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
      >>
              </md-button>
              <md-menu-content width="4">
                          <md-menu-item>
        <md-button>
            aa
        </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button>
            bb
          </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button>
          cc
        </md-button>
      </md-menu-item>
                </md-menu-content>
              </md-menu>

    </md-menu-content>
  </md-menu>

【讨论】：

【解决方案2】：

我玩了一会儿，我们可以听 mdMenuClose 发射器了。从那时起，我们调用 $mdSelect.hide() 函数来在 mdMenu 关闭时隐藏选择框。

https://codepen.io/anon/pen/jxXbrX

$scope.$on('$mdMenuClose', function (event) {
    $mdSelect.hide();
});

【讨论】：