当在$mdDialog内部时忽略md-select

Question

我在材料设计对话框中使用材料设计元素有问题。我想显示一个md-select元素，它允许用户从拒绝请求的三个原因中进行选择，而不是从该选择中选择预先确定的选项，用户也可能在md对话框文本区域中留下另一个原因。但是，md-select和md-选项元素被忽略，只将文本留在元素中，而md-输入容器正在正确显示。

var confirm = $mdDialog.prompt()
.title('Reason for Declining Trip')
.htmlContent(
  "<md-dialog aria-label='List dialog'>" +
  "<md-dialog-content>" +
  "  <md-select ng-model='model' placeholder='Select a reason'>" +
  "    <md-option ng-value='opt'>Scheduling Conflict</md-option>" +
  "    <md-option ng-value='opt'>Personal Conflict</md-option>" +
  "    <md-option ng-value='opt'>Hours of Service Concern</md-option>" +
  "  </md-select>" +
  "<br>" +
  "  <md-input-container class='md-block'>" +
  "    <label>Other</label>" +
  "    <textarea rows='1' md-select-on-focus></textarea>" +
  "  </md-input-container>" +
  "</md-dialog-content>" +
  "</md-dialog>"
)
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Decline the Trip')
.cancel('Cancel');

Answer 1

我能够通过调用.show()和直接传递信息来解决这个问题，而不是将提示符保存在变量中。另外，需要将htmlContent:键更改为template:。固定代码：

  $mdDialog.show({
      controller: AppCtrl,
      template: "<md-dialog aria-label='List dialog'>" +
          "<md-dialog-content layout-padding>" +
          "<h2>Reason for Declining Trip</h2>" +
          "  <md-select ng-model='model' placeholder='Select a reason'>" +
          "    <md-option>Scheduling Conflict</md-option>" +
          "    <md-option>Personal Conflict</md-option>" +
          "    <md-option>Hours of Service Concern</md-option>" +
          "  </md-select>" +
          "<br>" +
          "  <md-input-container class='md-block'>" +
          "    <label>Other</label>" +
          "    <textarea rows='2' md-select-on-focus></textarea>" +
          "  </md-input-container>" +
          "</md-dialog-content>" +
          "</md-dialog>",
      parent: angular.element(document.body),
      ariaLabel: 'Lucky day',
      targetEvent: ev,
      ok: 'Decline the Trip',
      cancel: 'Cancel'
  }).then(function() {
      $scope.status = 'You decided to decline this trip.';
      submit();
  }, function() {

  });

Answer 2

 <md-dialog aria-label="options dialog">
        <md-dialog-content layout-padding>
          <h2 class="md-title">Choose an option</h2>
          <md-select ng-model="myModel" placeholder="Pick">
            <md-option>1</md-option>
            <md-option>2</md-option>
            <md-option>3</md-option>
          </md-select>
        </md-dialog-content>
        <md-dialog-actions>
          <span flex></span>
          <md-button ng-click="close()">Okay!</md-button>
        </md-dialog-actions>
      </md-dialog>

演示