Ui-Gridをモーダル内で使用すると、オプションを開こうとするとドロップダウンが消えます

Question

ui-grid内でui-selectを使用しようとしています。私はhttp://brianhann.com/ui-grid-and-dropdowns/#more-287の手順に従いました。私は彼が複雑なJSONの代わりに単純な配列を使用したことを意味しますが、大丈夫です！

私の問題は、このcenerioをモーダルの内側に作成しようとすると、ドロップダウンを編集するためにクリックすると普通に表示されますが、オプションを選択するためにドロップダウンをクリックしてクリックすると、助けて？私は間違っているの？

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

Answer 1

私はちょうどスタイル=使用して問題を解決しました：;、私はドロップダウンがあったことに気づいたが、モーダルの背後にあるので、Zインデックスを使用した「Zインデックス9999」問題を解決しました。

Answer 2

のGithub上adharrisからこの回答を参照してください。

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

[更新：要するにhttps://github.com/angular-ui/ui-select/issues/201

、あなたがリンク（$スコープ、$ニレ、$ attrsに）関数で、次のスニペットを追加します]上記の結果が実際に期待どおりに実行されなかったことを明確にしたいだけです。私の場合は、ui-select-wrapperタグを削除し、以下のように機能を変更しなければなりませんでした。