Question

在他们的网站上按照自定义对话框的示例，得到了不同的结果。我的行动＆＃39;如here

所示，行位于模态的顶部而不是底部

这里是我使用的模板的html

<md-dialog aria-label="Mango (Fruit)"  ng-cloak>
  <form>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>Mango (Fruit)</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon md-svg-src="app/img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <div class="md-dialog-content">
        <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
        <p>
          The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
        </p>
        <img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
        <p>
          The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical and subtropical regions.
        </p>
        <p>
          It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
        </p>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
        More on Wikipedia
      </md-button>
      <span flex></span>
      <md-button ng-click="answer('not useful')">
       Not Useful
      </md-button>
      <md-button ng-click="answer('useful')" style="margin-right:20px;">
        Useful
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

继承人控制器

angular.module('dialogDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
  $scope.status = '  ';
  $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');
  $scope.showAlert = function(ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    // Modal dialogs should fully cover application
    // to prevent interaction outside of dialog

  $scope.showAdvanced = function(ev) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: useFullScreen
    })
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      $scope.status = 'You cancelled the dialog.';
    });
    $scope.$watch(function() {
      return $mdMedia('xs') || $mdMedia('sm');
    }, function(wantsFullScreen) {
      $scope.customFullscreen = (wantsFullScreen === true);
    });
  };

function DialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

关注他们网站上的示例，不过我的行动是＆＃39;行位于对话框的顶部而不是底部。我缺少css吗？或者网站上的示例存在问题吗？

Answer 1

我使用较旧版本的Angular Material（在我的情况下为0.10.0）时使用了更新版本的angular（1.5.7在我这边）。

您可以尝试更新Angular Material，或者，如果确实不想更新，您可以使用已弃用的div可能性：

<div class="md-actions" layout="row" layout-align="end center">

而不是

<md-dialog-actions layout="row">

Answer 2

您可以通过添加新的CSS类轻松完成。

<style>
.bottom-fix {
position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
}
</style>

添加这样的类 -

<md-dialog-actions align="end" layout="row" class="bottom-fix">

Answer 3

我遇到了同样的问题，这里提出的解决方案对我不起作用。

经过一些测试，我设法以这种方式解决了这个问题：

<md-dialog>
    <div>
        <md-toolbar>
            ...
        </md-toolbar>
        <md-dialog-content>
            ...
        </md-dialog-content>
    </div>
    <div>
        <md-dialog-action>
            ...
        </md-dialog-action>
    </div>
</md-dialog>

希望这会有所帮助

md对话框操作位于对话框的顶部而不是底部

3 个答案: