md-select 在 $mdDialog 中时被忽略

Question

我在 material 设计对话框中使用 material 设计元素时遇到问题。我想显示一个 md-select 元素，允许用户从拒绝请求的三个原因中进行选择，而不是从 select 中选择一个预先建立的选项，用户也可以在 md-dialog 文本区域中留下另一个原因。但是，md-select 和 md-option 元素将被忽略，在 md-input-container 正确显示时仅保留元素中的文本。

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

 <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>

DEMO

Answer 2

我能够通过调用 .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() {

  });

md-select 在 $mdDialog 中时被忽略

md-select is ignored when inside $mdDialog

javascript

angularjs

material-design

mddialog