CODEWITHSUNDEEP
angularjs
David
David

Reputation: 1293

AngularJS passing data back from mdDialog to parent controller

I have a little Angularjs application making use of $mdDialog to pop up a html page that has one text input on it

I want to be able to return the value the user types into the input back to the parent scope. I'm unsure how to do this.

This is what I have so far

$scope.showNewTeamDialog = function () {
   $mdDialog.show({
       controller: NewTeamDialogController,
       templateUrl: 'NewTeam.html',
       locals: { newTeamName: $scope.newTeamName },
       parent: angular.element(document.body)
   })
};

function NewTeamDialogController($scope, $mdDialog, newTeamName) {

      $scope.closeDialog = function(newTeamName) {
           // before closing I want to set $scope.newTeamName to whatever the user typed in the text on the dialog pop up
           $mdDialog.hide();
      }  
}

Upvotes: 2

Views: 3715

Answers (2)

Vincent
Vincent

Reputation: 1651

The cleanest solution that I use is sending the data back when $destroy is fired. This is clean because it handles all cases for why the dialog is closing, ie when there's a click outside or the escape key is pressed or $mdDialog.hide() is called. 

app.controller('CallerController', ['$scope', '$mdDialog',
    function($scope, $mdDialog) {

  $scope.some_event_listener = function(e) {
    $mdDialog.show({
      parent: angular.element(document.body),
      controller: SomeDialogController,
      templateUrl: 'some_dialog.html',
      locals: {
        on_complete: function(data_from_dialog_controller) {
          console.log(data_from_dialog_controller);
        }
      }
    });
  };

}]);

app.controller('SomeDialogController', ['$scope', '$mdDialog', 'on_complete',
    function($scope, $mdDialog, on_complete) {

  $scope.$on('$destroy', function() {
    on_complete($scope.some_input_model);
  });

}]);

Upvotes: 4

laughingpine
laughingpine

Reputation: 1049

While this wouldn't be right before the dialog closed, I would probably do this using the .then part of the dialog.show promise. Here is a codepen with using one of the ngMaterial examples to modify a variable on close: https://codepen.io/mckenzielong/pen/veBrgE. Basically, something like this:

$scope.showNewTeamDialog = function () {
   $mdDialog.show({
       controller: NewTeamDialogController,
       templateUrl: 'NewTeam.html',
       locals: { newTeamName: $scope.newTeamName },
       parent: angular.element(document.body)
   })
   .then((newTeamName) => {
     $scope.newTeamName = newTeamName;
   })
};

function NewTeamDialogController($scope, $mdDialog, newTeamName) {   
  $scope.closeDialog = function(newTeamName) {
    $mdDialog.hide(newTeamName);
  }  
}

Alternatively you could do something a little more ugly, and share the scope like this: https://codepen.io/mckenzielong/pen/zEOaRe. One downside to this is your code will become confusing very quickly. Something like this:

$scope.showNewTeamDialog = function () {
   $mdDialog.show({
       controller: NewTeamDialogController,
       templateUrl: 'NewTeam.html',
       scope: $scope.newTeamName,
       parent: angular.element(document.body)
   })
   .then(() => {

   })
};

function NewTeamDialogController($scope, $mdDialog) {   
  $scope.closeDialog = function(newTeamName) {
    $scope.newTeamName = newTeamName
    $mdDialog.hide();
  }  
}

Upvotes: 1

Related Questions