Angular Dialog with Angular Form

Question

I have an Angular app and am using Angular-Material among other components. Is it possible to open an Angular Tab Dialog with a TemplateUrl being lazy loaded which contains an Angular form? How would you reference this form if at all possible? Here is some code I use to open the dialog:

    $scope.showTabDialog = function(ev) {

        $mdDialog.show({
                controller: DialogController,
                templateUrl: 'pages/properties/tabDialog.tmpl.html',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose:true
            })
            .then(function(answer) {
                $scope.status = 'You said the information was "' + answer + '".';
            }, function() {
                $scope.status = 'You cancelled the dialog.';
            });
    };

Any Help would be appreciated, thank you

so what's the problem here? – Zeel Shah Feb 03 '16 at 13:58 — Zeel Shah, Feb 03 '16 at 13:58

score 3 · Accepted Answer · answered Feb 05 '16 at 15:38

3

Not sure I understand your question correctly but for basic use, pass in your context to locals and return your info to $mdDialog.hide

    $mdDialog.show({
      targetEvent: $event,
      template: dialogContent,
      controller: 'DialogController',
      locals: { info: $scope.info }
    }).then(function(info) {
        if(info) {
          $scope.info.userName = info.userName;      
        }
      });

...

$mdDialog.hide(info);

See this Code Pen:

http://codepen.io/anon/pen/BjqzJR

answered Feb 05 '16 at 15:38

malix

3,566
1
31
41

@johan did that answer your question? – malix Feb 06 '16 at 13:50
Hi guys, please accept my apologies for late reply, i have been working on another project and have only been able to come back to this problem now. I think this is exactly what I need and I will test your answer with my project. Thank you, I will revert if it worked for me. – johan Feb 16 '16 at 11:36
Thank you, you sent me in the right direction. It is working now – johan Feb 23 '16 at 11:21
Ah, I'm stuck now binding the info variable to the form elements inside the dialog box – johan Feb 23 '16 at 11:24

Angular Dialog with Angular Form

1 Answers1