在mdDialog中，角度材质md-select不关闭

我正在使用角材质版本1.1.4，角度版本1.5.9，并且我对md-select指令有以下问题。在mdDialog中，角度材质md-select不关闭

我打开一个对话框，使用$ mdDialog服务点击一个按钮。该对话框是全屏。里面我有多个输入，以及一个MD选择输入。在md-select上，您可以选择多个项目，因此从列表中选择一个项目后它不会自动关闭。打开它并选择你想要的项目后，点击它以外的关闭它并进入下一个输入，但在mdDialog窗口中使用时，其外部的单击事件不会关闭md-select。

我搜索了这个问题，发现了几个问题，但其中一些几个月没有答案，其他问题没有解决方案。

非常感谢您的时间，希望您可以用干净的方式帮助我做到这一点。或者，我将不得不手动添加单击事件，我宁愿避免。

来源

2017-05-31 florinmtsc

您是否找出修复方法？我有同样的问题。 – Holt

我找到了一个修复程序。这不是最漂亮的，但它的工作原理。你可以做的是在md-select之外获得点击事件（你希望你的用户点击关闭md-select）并使用$ mdSelect服务来隐藏它（$ mdSelect.hide（）） – florinmtsc

我如何解决这个问题：

var dialogContainer = angular.element(document.querySelector('.bara-cautare-directive-root')), 
     mdSelects = document.getElementsByTagName('md-select'); 

    dialogContainer.bind('click', function (event) { 
     var closeMdSelect = true; 

     _.forEach(mdSelects, function (mdSelect) { 
      mdSelect = angular.element(mdSelect); 
      // what I do here is to check if the click event was triggered by the md-select I want to close. When opening the md-select, it will automatically close it, so I make sure that whenever this md-select is clicked, I don't hide it. 
      if (mdSelect.is(event.target) || mdSelect.has(event.target).length != 0) { 
       closeMdSelect = false; 

       return false; 
      } 
     }); 

     if (closeMdSelect) { 
      $mdSelect.hide(); 
     } 
    });

来源

2017-07-25 18:22:50 florinmtsc

积分到用户@Lihini。请参考此处的答案：https://stackoverflow.com/a/46169071/873976

该问题可以通过覆盖md-backdrop的zindex来解决。只需添加以下css

.md-select-menu-container { 
    z-index: 900; } 

md-backdrop.md-select-backdrop { 
    z-index: 899; }

来源

2018-01-22 10:47:16

在mdDialog中，角度材质md-select不关闭

回答

相关问题