Pass data to Controller from another controller using $mdDialog

[wp_ad_camp_1]

There are a couple of ways to do this.One is via $rootScope by creating (maybe temporarily) a public member variable and let the dialog controller read from it. This is also similar to creating a service with public member variable and injecting the service to the dialog controller.

Second, we use $mdDialog’s options which provide us 3 ways to actually pass data to another (dialog) controller.

$mdDialog

$mdDialog opens a dialog over the app to inform users about critical information or require them to make decisions. As of this writing (Anguler Materia version 1.0.3), it has 5 methods but in this article we are only interested in

[wp_ad_camp_2]

$mdDialog.show(optionsOrPreset);

1	$mdDialog.show(optionsOrPreset);

optionsOrPreset is an object and we’ll use the following properties to pass data to another controller.

scope – {object=}: the scope to link the template / controller to. If none is specified, it will create a new isolate scope. This scope will be destroyed when the dialog is removed unless preserveScope is set to true.
- preserveScope – {boolean=}: whether to preserve the scope when the element is removed. Default is false. We’ll use this to preserve the scope from which the modal controller was invoked.
locals – {object=}: An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} would inject three into the controller, with the value 3. If bindToController is true, they will be copied to the controller instead.
resolve – {object=}: Similar to locals, except it takes promises as values, and the dialog will not open until all of the promises resolve.

Parent Controller

The following is an example of how to pass data to a dialog controller. Here we used resolve, locals and scope (and preserveScope) properties.

...
$scope.goodStudents = [2];
...
$mdDialog.show({
    controller: 'MyDialogController as modal',
    templateUrl: './somewhere/partials/mydialog.html',
    parent: angular.element(document.body),
    targetEvent: ev,
    windowClass: 'detailView',
    clickOutsideToClose:false,
	resolve: {
        studentList: (function() {
            return function() {
                return [{id: 1, name: 'Peter'}, {id: 2, name: 'John'}, ];
            };
        })()
        },
        locals: {badStudents : [1]},
        scope: $scope,
        preserveScope: true
}).then(function(answer) {
    // Noop
}, function() {
    $scope.status = 'You cancelled the dialog.';
});
...

...

$scope.goodStudents = [2];

...

$mdDialog.show({

controller: 'MyDialogController as modal',

templateUrl: './somewhere/partials/mydialog.html',

parent: angular.element(document.body),

targetEvent: ev,

windowClass: 'detailView',

clickOutsideToClose:false,

resolve: {

studentList: (function() {

return function() {

return [{id: 1, name: 'Peter'}, {id: 2, name: 'John'}, ];

};

})()

locals: {badStudents : [1]},

scope: $scope,

preserveScope: true

}).then(function(answer) {

// Noop

}, function() {

$scope.status = 'You cancelled the dialog.';

});

...

Dialog Controller

At the receiving end, we have the following modal controller.

[wp_ad_camp_3]

(function(){
    angular.module('app')
        .controller('MyDialogController', ['$scope', 'studentList', 'badStudents'
            function ( $scope, studentList, badStudents) {
				alert($scope.goodStudents.indexOf(2) > -1); // Should display true
            }]);
})();

(function(){

angular.module('app')

.controller('MyDialogController', ['$scope', 'studentList', 'badStudents'

function ( $scope, studentList, badStudents) {