如何在AngularJS ui bootstrap $ modal中使用md-select？

Question

我想要在角度ui引导$模式中使用角度材质md-select。

我想用下面的代码

MyController1.js

$modal.open({ 
     templateUrl: My.html, 
     controller: MyController2, 
     backdrop: true, 
     windowClass: 'modal' 
    }); 

My.html

<div layout="row"> 
    <md-input-container> 
    <label>Items</label> 
    <md-select ng-model="selectedItem" md-selected-text="getSelectedText()"> 
     <md-optgroup label="items"> 
     <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option> 
     </md-optgroup> 
    </md-select> 
    </md-input-container> 
</div> 

MyController2.js

$scope.items = [1, 2, 3, 4, 5, 6, 7]; 
$scope.selectedItem; 
$scope.getSelectedText = function() { 
    if($scope.selectedItem !== undefined) { 
     return "Selected: " + $scope.selectedItem; 
    } else { 
     return "Please select an item"; 
    } 
}; 

我可以在模态弹出窗口中查看md-select小部件。但是，如果我尝试从“下拉菜单”中选择该值，该列表将在$模式的后面打开。

我编辑的问题：添加一些事情得到确切的答案

我可以达到同样的使用md-dialog。但我的代码是这样的

MyController2.js

angular.module('myModule', [ 
]) 
.controller('MyController2', ['$mdDialog', '$scope', 
function($mdDialog, $scope) { 
    $scope.items = [1, 2, 3, 4, 5, 6, 7]; 
    $scope.selectedItem; 
    $scope.getSelectedText = function() { 
    if($scope.selectedItem !== undefined) { 
     return "Selected: " + $scope.selectedItem; 
    } else { 
     return "Please select an item"; 
    } 
    }; 
    }); 

所以，如果我在MyController1.js

$mdDialog.show({ 
    controller: MyController2, 
    templateUrl: 'My.html', 
    parent: angular.element(document.body), 
    // targetEvent: ev, 
    clickOutsideToClose:true 
}) 
    .then(function(answer) { 
     $scope.status = 'You said the information was "' + answer + '".'; 
    }, function() { 
     $scope.status = 'You cancelled the dialog.'; 
    }); 

它给有像下面的代码，我错误Error: MyController2 is not defined

Answer 1

试试这个：

个

.MD-选择菜单容器{z-index的：9999;}