CODEWITHSUNDEEP
angularjsmddialog
Dominik Krulak
Dominik Krulak

Reputation: 611

Md-dialog dysfunction trigger button wrapped within md-dialog controller

I followed documentation to produce working md-dialog, but I've stuck on dysfunctional button, which triggers dialog. Once dialog opened and closed, the trigger button (everything that uses script within that controller) appears not doing it's job.

Here is CodePen and code.

var app = angular.module('app', ['ngMaterial', 'ngAnimate']);

// Dialog controller
app.controller('showDialogCtrl',
  function ($scope, $mdDialog) {
    // Showing order form dialog
    $scope.showDialog= function($event){
      $mdDialog.show({
         targetEvent: $event,
         clickOutsideToClose: true,
         scope: $scope,
         template: 
            '<md-dialog>' +
            '  <md-dialog-content>Hello!</md-dialog-content>' +
            '  <md-dialog-actions>' +
            '    <md-button ng-click="closeDialog()" class="md-primary">' +
            '      Close' +
            '    </md-button>' +
            '  </md-dialog-actions>' +
            '</md-dialog>',
         parent: angular.element(document.body),
         controller: DialogController,
      });
      function DialogController($scope, $mdDialog) {
        $scope.closeDialog = function() {
          $mdDialog.hide();
        };
      };
    }
});    

<md-button ng-controller="showDialogCtrl" ng-click="showDialog($event)">
Click
</md-button>

Upvotes: 1

Views: 192

Answers (1)

John Smith
John Smith

Reputation: 2341

You're passing the parent $scope to your dialog, which gets automatically removed when you close the dialog. Add preserveScope: true to your dialog config so it won't get deleted once you close the dialog.

Docs: https://material.angularjs.org/HEAD/api/service/$mdDialog

Upvotes: 1

Related Questions