How to access parent controller data in $mdDialog modal controller

Question

Angularjs $mdDialog not opening modal on passing this. Why?

I'm trying to access parent controller data in child controller. Data is passing but the modal is not opening. When I print the response it shows

Cannot read property 'createDocumentFragment' of undefined

var ctrl = this;
ctrl.add_user_popup = function(data){

    $mdDialog.show({
        templateUrl: 'userManagement/addUserPopup.html',
        controller: 'addUserPopup_controller',
        controllerAs: 'umpctrl',
        clickOutsideToClose: true,
        dataToEdit: data,
        escapeToClose: true,
        parent: ctrl  //When I comment this line modal opens
    }).then(function(response){
        console.log('add_user_popup success',response);
    }, function(res){
        console.log('add_user_popup failed',response);
    })
}

Answer 1

I want to access parent controller data in the modal controller.

var ctrl = this;
ctrl.add_user_popup = function(data){
    return $mdDialog.show({
        templateUrl: 'userManagement/addUserPopup.html',
        controller: 'addUserPopup_controller',
        controllerAs: 'umpctrl',
        clickOutsideToClose: true,
        ̶d̶a̶t̶a̶T̶o̶E̶d̶i̶t̶:̶ ̶d̶a̶t̶a̶,̶
        locals: { dataToEdit: data },
        bindToController: true,
        escapeToClose: true,
        ̶p̶a̶r̶e̶n̶t̶:̶ ̶c̶t̶r̶l̶ ̶ ̶/̶/̶W̶h̶e̶n̶ ̶I̶ ̶c̶o̶m̶m̶e̶n̶t̶ ̶t̶h̶i̶s̶ ̶l̶i̶n̶e̶ ̶m̶o̶d̶a̶l̶ ̶o̶p̶e̶n̶s̶
    }).then(function(result){
        console.log('add_user_popup success',result);
        return result;
    }, function(reason){
        console.log('add_user_popup dismissed',reason);
        throw reason;
    })
}

Use the locals property of the dialog options object.

From the Docs:

• 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.
• bindToController - bool: bind the locals to the controller, instead of passing them in.

For more information, see

• AngularJS Material $mdDialog Service API Reference