angularjs – Angular Material – 当我关闭菜单时,如何关闭/隐藏我的md-select？

我在我的md菜单中使用md-menu-item元素.菜单由一个按钮激活 – 一切正常,所有都使用默认角度js.

在每个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菜单就像它应该&一切都很好.

如果我点击其中一个< md-select>元素,然后单击屏幕中的某个位置,< md-menu>关闭,但我仍然可以看到< md-select>元件.

有没有办法在菜单项中“嵌套”选择元素,这样当我关闭菜单项时,所有子元素也会关闭？

我所看到的Here is a codepen example.

谢谢你的任何建议！

解决方法

在框外单击时隐藏md-select.我正在使用’$mdselect.hide()’来关闭md-select下拉菜单.我只是在主控制器中放了3行.

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