如何在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;}