如何在$ mdDialog中添加表单

时间:2016-09-23 18:56:06

标签: javascript angularjs mddialog

如何在$ mdDialog中添加表单并提交如何发送到电子邮件。我试图从对话框中获取,但无法得到任何线索。

我的控制器是:

App.controller('MainController', function ($scope, $mdDialog) {
console.log("reaching mainController");
$scope.showPrompt = function (ev) {
    console.log("reaching showprompt");
    // Appending dialog to document.body to cover sidenav in docs app
    var confirm = $mdDialog.prompt()
        .title('Please give us your details')
        .textContent('We are happy to quote for your interiors in your new home.')
        .placeholder('Name')
        .ariaLabel('Dog name')
        .initialValue('')
        .placeholder('Name')
        .ariaLabel('Dog name')
        .initialValue('')
        .targetEvent(ev)
        .ok('Submit')
        .cancel('Later');

    $mdDialog.show(confirm).then(function (result) {
        $scope.status = 'You decided to name your dog ' + result + '.';
    }, function () {
        $scope.status = 'You didn\'t name your dog.';
    });
};

我想在页面加载中显示对话框,并在ng-init

中添加了该功能
    <div ng-controller="MainController" ng-init="showPrompt($event)">

模态正在加载时迅速加载。我在某个地方出错了。

1 个答案:

答案 0 :(得分:1)

最好的方法是使用“templateUrl”,你可以把你的html文件的url放在你想要的地方,或者使用“template”作为内联html。

https://material.angularjs.org/latest/api/service/ $ mdDialog

$mdDialog.show({
          targetEvent: $event,
          template:
            '<md-dialog>' +

            '  <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' +

            '  <md-dialog-actions>' +
            '    <md-button ng-click="closeDialog()" class="md-primary">' +
            '      Close Greeting' +
            '    </md-button>' +
            '  </md-dialog-actions>' +
            '</md-dialog>',
          controller: 'GreetingController',
          onComplete: afterShowAnimation,
          locals: { employee: $scope.userName }
        });