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

【问题标题】：How can use the md-select in the AngularJS ui bootstrap $modal?如何在 AngularJS ui bootstrap $modal 中使用 md-select？
【发布时间】：2016-07-27 14:21:28
【问题描述】：

我想在 Angular ui bootstrap $modal 中有一个 Angular 材质 md-select。

我正在尝试使用以下代码

MyController1.js

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

我的.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 小部件。但如果我尝试从“下拉菜单”中选择值，则列表在 $modal 的后面打开。

我已编辑的问题：添加更多内容以获得准确答案

我可以使用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

【问题讨论】：

您可以在相关元素上使用z-index css 属性来解决问题
试试这个：controller: 'MyController2'，解决未定义控制器的错误。
还没有人解决这个问题？我有同样的问题 z-index 无济于事

标签： angularjs angular-ui-bootstrap angular-ui angular-material

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

只是要添加到 AL Tafas 答案，要让点击工作，您需要将其添加到 md-backdrop 元素。

/* Angular Material Overrides */
.md-select-menu-container, md-backdrop {
    z-index: 9999 !important;
}

【讨论】：

添加 md-backdrop.md-select-backdrop 而不是 md-backdrop 否则它将覆盖其他警报/烤面包机

【解决方案3】：

使用一个简单的CSS技巧你可以解决这个问题

必须大于引导弹出窗口的 z-index

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

必须小于上述值（900）。否则，当您单击背景时，md-select 不会自行关闭。

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

【讨论】：