Call a parent controller method from child modal controller (ui bootstrap)

Question

So here is the condition i m having trouble with , its like i have parent controller and a child controller which is a modal controller , i have a method in parent controller which i want to call from child modal controller, i dont know what i m missing but thats what i have tried.

  App.controller('MailFolderController', ['$scope', '$http', '$timeout', '$stateParams', '$window', 'mails', '$interval', function ($scope, $http, $timeout, $stateParams, $window, mails, $interval) {


$scope.check = function(){
    console.log("call parent ==========>")
}


  App.controller('orderCancellationController', ['$scope', '$modal', function ($scope, $modal) {

    $scope.open = function (mail) {
        var modalInstance = $modal.open({
            templateUrl: '/orderCancellationBox.html',
            controller: ModalInstanceCtrl,
            resolve: {
                mail: function () {
                    return mail;
                }
            }
        });
    };

    // Please note that $modalInstance represents a modal window (instance) dependency.
    // It is not the same as the $modal service used above.

    var ModalInstanceCtrl = function ($scope, $modalInstance, mail) {

        $scope.mail = mail;
        $scope.submit = function () {
            $scope.$parent.check();
            $modalInstance.close('closed');
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };
    ModalInstanceCtrl.$inject = ["$scope", "$modalInstance", 'mail'];

}]);


}]);

but it gives me an error no such function , i m getting error on check method, i want to call this check method from modal instance controller , but unable to do , please help.

try to add 'scope: $scope' under your 'controller: ModalInstanceCtrl' — sch
– sch, Commented Oct 5, 2015 at 9:55

sch · Accepted Answer · 2015-10-05 09:59:46Z

13

https://angular-ui.github.io/bootstrap/#/modal

Modal in bootstrap has an 'scope' option,

scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope

using scope: $scope should allow you to use methods defined in your parent controller

example:

    $scope.open = function (mail) {
    var modalInstance = $modal.open({
        templateUrl: '/orderCancellationBox.html',
        controller: ModalInstanceCtrl,
        scope: $scope,
        resolve: {
            mail: function () {
                return mail;
            }
        }
    });
};

answered Oct 5, 2015 at 9:59

sch

1,3985 gold badges20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sch Over a year ago

np, I think you can also 'resolve' the method (as you do with mail), but I haven't tried that myself

Anatoly Over a year ago

actually reason why calling function without $parent works is prototype inheritance, am I right?

Rawan Mansour Over a year ago

what is the mean of Defaults to $rootScope?

roanjain · Accepted Answer · 2015-10-13 13:30:05Z

2

Resolve $scope in $modal and simply call $scope.parent.check , and you are done !!

answered Oct 13, 2015 at 13:30

roanjain

1,2525 gold badges14 silver badges32 bronze badges

Collectives™ on Stack Overflow

Call a parent controller method from child modal controller (ui bootstrap)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related