如何使角度材质自定义模态窗口的内容作为父模态窗口响应答案

【问题标题】：How to make the content of an angular material custom modal window to be responsive as the parent modal window如何使角度材质自定义模态窗口的内容作为父模态窗口响应
【发布时间】：2015-08-27 16:32:28
【问题描述】：

您好，我创建了一个角度材质自定义模态窗口。我结合了自定义模态窗口中的示例 + 角度材质滑块演示。一切都很好，只是模式窗口内的滑块没有响应并且相互重叠。我尝试过使用 flex 但仍然没有成功。 This is my plunk供您参考。

$scope.showAdd = function(ev) {
$mdDialog.show({
  controller: DialogController,

  template: '<md-dialog aria-label="Load Slider" flex flex="100"> * <div ng-controller="AppCtrl"><md-content style="margin: 16px; padding:16px"><h3>Total <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> </h3> <div layout> <div flex="10" layout layout-align="center center"> <span class="md-body-1">CALL</span> </div> <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class> </md-slider> <div flex="20" layout layout-align="center center"> <input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider"> </div> </div> <div layout> <div flex="10" layout layout-align="center center"> <span class="md-body-1">SMS</span> </div> <md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent"> </md-slider> <div flex="20" layout layout-align="center center"> <input type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider"> </div> </div> <div layout> <div flex="10" layout layout-align="center center"> <span class="md-body-1">DATA</span> </div> <md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary"> </md-slider>  <div flex="20" layout layout-align="center center"> <input type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider"> </div> </div> </md-content> </div> .. <div class="md-actions" layout="row"> <span flex></span> <md-button ng-click="answer(\'not useful\')"> Cancel </md-button> <md-button ng-click="answer(\'useful\')" class="md-primary"> Save </md-button> </div></md-dialog>',

  targetEvent: ev,
})
.then(function(answer) {
  $scope.alert = 'You said the information was "' + answer + '".';
}, function() {
  $scope.alert = 'You cancelled the dialog.';
});

};

下面是自定义模式的屏幕截图，其中滑块与内部的其他组件重叠。

【问题讨论】：

标签： javascript css angularjs angular-material

【解决方案1】：

搞定了！

首先是我将 flex flex="100" 添加到 md-dialog 标记中。
接下来，我通过在 md-content 标记内的父 div 中添加 layout-margin layout-fill layout-padding 来在标签、滑块和文本框周围添加填充以避免重叠。
最后是把 flex="100" 添加到所有

【讨论】：