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

Question

您好我已经创建了一个角度材质自定义模态窗口。我结合了自定义模态窗口+角度材质滑块演示的示例。一切都很好，除了模态窗口内的滑块没有响应并且彼此重叠。我尝试过使用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.';
});

};

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