call a function from ui bootstrap modal controller

Question

I have a modal that's opened with a new controller of its own, and I want to call a function from the modal controller, but the function is defined in the parent controller.

I defined this function to be invoked from $rootScope, is this the best way to call a function from a parent in the modal or will it make sense in the future?

Example:

  FormModule.controller("formCtrl", function ($scope, $http, $uibModal, $log, $rootScope) {

        $rootScope.ShowReport = function ShowReport() {

        //function Edit
        $scope.edit = function () {
            var ObjResolve = function () {
                return obj;
            }
            var modalInstance=  $uibModal.open({
                animation: true,
                templateUrl: 'Modal.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    ObjResolve
                }
            }).result.catch(function (res) {
                if (!(res === 'cancel' || res === 'escape key press')) {
                    //throw res;
                }
            });
        };

    });
 FormModule.controller("ModalInstanceCtrl", function ($scope, $uibModal, $uibModalInstance, $http, ObjResolve, $rootScope ) {

        //save Event
        $scope.save = function () {
         $rootScope.ShowReport();
        }


    });

Hussain · Accepted Answer · 2019-03-04 11:06:05Z

1

You can use modalInstance callback which is called when modal is CLOSED

$scope.edit = function () {
 var ObjResolve = function () {
   return obj;
 }
 var modalInstance=  $uibModal.open({
        animation: true,
        templateUrl: 'Modal.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
        ObjResolve
        }
    }).result.catch(function (res) {
     if (!(res === 'cancel' || res === 'escape key press')) {//throw res;}
    });
    modalInstance.result.then(function(){
        ShowReport() //call function when modal is closed
    })
 };

modal controller

FormModule.controller("ModalInstanceCtrl", function ($scope, $uibModal, $uibModalInstance, $http, ObjResolve, $rootScope ) {

            //save Event
            $scope.save = function () {
             $uibModalInstance.close();
            }
    })

answered Mar 4, 2019 at 11:06

Hussain

875 bronze badges

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

5 Comments

Rawan Mansour Over a year ago

thank you, I know that but there is a problem if the function still in the rootscope?

Hussain Over a year ago

try to avoid rootscope

Hussain Over a year ago

detailed explanation stackoverflow.com/questions/32761540/…

Rawan Mansour Over a year ago

Thank you very much, then it's not recommended to use rootscope.

svarog Over a year ago

$rootscope is a very useful feature, just not for this particular use-case

Collectives™ on Stack Overflow

call a function from ui bootstrap modal controller

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related