角度材料如何将数据传递到预设对话框答案

【问题标题】：angular material how to pass data to preset dialog角度材料如何将数据传递到预设对话框
【发布时间】：2016-12-30 02:50:02
【问题描述】：

我正在使用 Angular Material，并使用 $mdDialogProvide 创建了一个简单的预设对话框：

angular.module('starterApp').config([
  '$mdDialogProvider',
  function ($mdDialogProvider) {
    $mdDialogProvider.addPreset('warning', {
      options: function () {
        return {
          template:
          '<md-dialog>' +
          '{{dialog.warning}}' +
          '</md-dialog>',
          controllerAs: 'dialog',
          theme: 'warning'
        };
      }
    });
  }
]);

我想在调用它时传递一条警告消息。例如，我试图传递这样的消息：

    $mdDialog.show(
      $mdDialog.warning({
        locals: {
          warning: 'Warning message'
        }
      })
    );

但它不起作用。

实际上我检查了很多解决方案，但没有一个有效。文档中也没有这样的例子。

是否可以将一些日期传递给预设对话框？

【问题讨论】：

我想帮忙，但我在使用 CodePen 的控制台中收到此错误 - “$mdDialogProvider 未定义”。我是否必须在控制器中注入任何东西才能启用 $mdDialogProvider？
您需要将“ngMaterial”注入您的应用程序： angular.module('starterApp', ['ngMaterial', 'ui.router']) ，但要做到这一点，您需要首先包括角度材料：
是的，我拥有所有这些 - codepen.io/camden-kid/pen/yJWEog?editors=1010#0。好奇怪……
我有这样的东西：codepen.io/anon/pen/grJKzY?editors=1010#0
我明白了。谢谢。我会调查这个问题。 :-)

标签： angularjs dialog material-design angularjs-material

【解决方案1】：

这是一种方法 - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-button ng-click="showDialog()">Show Dialog</md-button>
</div>

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.config([
  '$mdDialogProvider',
  function ($mdDialogProvider) {
    $mdDialogProvider.addPreset('warning', {
      options: function () {
        return {
          template:
          '<md-dialog aria-label="Dialog">' +
          '{{warning}}' +
          '</md-dialog>',
          controller: DialogController,
          theme: 'warning',
          clickOutsideToClose: true
        };
      }
    });

    function DialogController($scope, $mdDialog, locals) {
      console.log(locals);
      $scope.warning = locals.warning;
    }
  }
])

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.showDialog = function () {
    $mdDialog.show(
      $mdDialog.warning({
        locals: {
          warning: 'Warning message'
        }
      })
    );
  }
});

【讨论】：

【解决方案2】：

快速的 ES6 方式

动态创建具有范围变量的控制器

let warning = 'Warning message';

$mdDialog.show({
    templateUrl: 'dialog.template.html',
    controller: $scope => $scope.warning = warning
})

模板

warning 是一个$scope 变量，因此在模板中可用

<md-dialog>
    <md-dialog-content>
        <span> {{warning}} </span>
    <md-dialog-content>
<md-dialog>

【讨论】：