Question

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

如果我单击打开菜单，然后单击选择，然后在选择元素外部，则仅删除菜单容器。由于菜单的md-backdrop元素具有比select元素的md-backdrop更高的z-index。

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

<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>

Answer 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>

Answer 2

我玩了一下，我们可以听mdMenuClose发射器。从那时起，我们调用``$ mdSelect.hide（）`函数来隐藏mdMenu关闭时的选择框。

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

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

删除多个MD菜单容器

2 个答案: