Ui-Grid with Ui-select inside a modal，当您尝试打开选项时下拉菜单消失

Question

我正在尝试在 ui-grid 中使用 ui-select，我按照以下步骤操作：http://brianhann.com/ui-grid-and-dropdowns/#more-287 我没有遇到任何问题要做到这一点，我的意思是他使用了一个简单的数组而不是复杂的 JSON，但是没关系！！

我的问题是，当我尝试在模式中创建此 cenerio 时，当我单击以编辑下拉菜单时，下拉菜单正常显示，但是当我单击打开下拉菜单以 select 一个选项时，我的 ui-select消失了，大家能帮帮我吗？我做错了什么？

angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.select', 
  'ui.bootstrap'])
  .controller('MainCtrl', MainCtrl)
 .controller('ModalCtrl', ModalCtrl)
 .directive('uiSelectWrap', uiSelectWrap);

  MainCtrl.$inject = ['$scope', '$http', '$uibModal'];
  function MainCtrl($scope, $http, $uibModal) {

 $scope.openModal = function(){
 var modalInstance = $uibModal.open({
            templateUrl: './modal.html',
            controller: 'ModalCtrl',
            size:'lg'
        });
  } 

 }

 uiSelectWrap.$inject = ['$document', 'uiGridEditConstants'];
 function uiSelectWrap($document, uiGridEditConstants) {
         return function link($scope, $elm, $attr) {
             $document.on('click', docClick);

 function docClick(evt) {
  if ($(evt.target).closest('.ui-select-container').size() === 0) {
    $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
    $document.off('click', docClick);
  }
}
};
}

ModalCtrl.$inject = ['$scope', '$http'];
function ModalCtrl($scope, $http){
$scope.gridOptions = {
rowHeight: 38,
columnDefs: [
  { name: 'name' },
  { name: 'age', type: 'number' },
  {
    displayName:'Gender',
    width:'150',
    field:'gender.option',
    editModelField: 'gender',
    editDropdownValueLabel: 'option',
    editableCellTemplate: 'uiSelect',
    editDropdownOptionsArray: [
      {id:1, option:'male'},
      {id:2, option:'female'},
      {id:3, option:'other'},
    ]
  }
 ]
 };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-
 grid.info/v3.0.7/data/500_complex.json')
.success(function(data) {
  $scope.gridOptions.data = data;
});
}

我的笨蛋：Plunker

Answer 1

我只使用 style="z-index:9999;" 解决了这个问题，我注意到下拉菜单在那里但在模态后面，所以使用 z-index 解决了这个问题。

Answer 2

请参阅 adharris 在 Github 上的回答：https://github.com/angular-ui/ui-select/issues/201

简而言之，您将在 link($scope,$elm,$attrs) 函数中添加以下代码段：

var uiSelectController = $elm.children().controller('uiSelect');
uiSelectController.activate();

[更新] 只是想澄清一下，上面的结果实际上并没有运行预期的那样。在我的例子中，我必须删除 ui-select-wrapper 标签 - 并更改函数如下：

return function link($scope, $elm, $attr) {
        $elm.controller('uiSelect').activate(); 
        $document.on('click', docClick);

Ui-Grid with Ui-select inside a modal，当您尝试打开选项时下拉菜单消失

Ui-Grid with Ui-select inside a modal, the dropdown dissapear when you try to open the options

modal-dialog

angularjs

ui-select

ui-grid