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();
        }


    });

score 1 · Answer 1 · answered Mar 04 '19 at 11:06

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 04 '19 at 11:06

Hussain

87
5

thank you, I know that but there is a problem if the function still in the rootscope? – Rawan Mansour Mar 04 '19 at 11:15
try to avoid rootscope – Hussain Mar 04 '19 at 11:23
1

detailed explanation https://stackoverflow.com/questions/32761540/why-using-rootscope-with-functions-is-not-recommended – Hussain Mar 04 '19 at 11:25
Thank you very much, then it's not recommended to use rootscope. – Rawan Mansour Mar 04 '19 at 11:41
`$rootscope` is a very useful feature, just not for this particular use-case – svarog Mar 06 '19 at 08:13

call a function from ui bootstrap modal controller

1 Answers1