System still calling scope function for $modal controller after closing

Question

I am working on AngularJS project. Please keep in mind it is Angularjs version 1. In this project, I have controller which is associated with a html page. In this controller, I have defined a function with $rootScope.

Now, on this page, I am also using a popup box. I am showing this Popup box using $modal component. This modal popup is also attached with a controller which also same function defined with $rootScope.

Below is my brief code:

angular.module('myapp').controller('pageCtrl', function($rootScope, $modal){

      $rootScope.getRecords = function() {
        //Do some action
      }
      
      $rootScope.openModal = function(){
          var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: modalCtrl
          });
          
          modalInstance.result.then(function(result){}, function(cancel){});
      }
    });
    
    angular.module('myapp').controller('modalCtrl', function($rootScope, $modal){

      $rootScope.getRecords = function() {
        //Do some action
      }
      
      $rootScope.closeModal = function(){
          $modalInstance.dismiss('cancel');
      }
    });

<!-- Page Html -->
<div class="" ng-controller="pageCtrl">
 <button class="btn" ng-click="openModal()">Open Modal</button>
 <button class="btn" ng-click="getRecords()">Get Record</button>
</div>

<!-- modal.html -->
<div class="">
    <p>You are in Modal Box</p>
    <button class="btn" ng-click="closeModal()">Close Modal</button>
</div>

You can see in my code, I have defined same function in page controller as well as modal controller. When I click on "Get Record" button before calling modal, system is calling function defined in page controller which is fine. But when I open modal and then close and then after I again click on "Get Record" button, system is calling function defined in modal controller rather than page controller.

I am not able to understand, why it is calling function of modal controller after opening modal box. Can someone please help me on this.

Maxim Shoustin Maxim Shoustin · Accepted Answer · 2020-04-22T14:25:21

I believe you use Bootstrap 1 for AngularJS

Why it calls an internal method getRecords() - because you redefine it.

Do:

$rootScope.getRecords = function() {
    alert("external 1");
}

$rootScope.getRecords = function() {
    alert("external 2");
}

and after calling it you get "external 2".

I'm not sure why you use $rootScope inside a $modal but it is not good practice.

If you want to call external getRecords, you can write:

Option 1

$scope.getRecords = function() {
   alert("external");
}

var modalInstance = $modal.open({
  templateUrl: 'modal.html',
  controller: modalCtrl,
  resolve: {
    callback: function () {
      return $scope.getRecords
    }
  }
});

and your modal:

angular.module('myapp').
controller('modalCtrl', function($scope, $modalInstance, callback){

  $scope.getRecords = function() {
    callback();
   }
  
  $rootScope.closeModal = function(){
      $modalInstance.dismiss('cancel');
  }
});

plunker Example

Option 2

Another way is to use the same $scope for the $modal:

 var modalInstance = $modal.open({
   templateUrl: 'myModalContent.html',
   controller: 'ModalInstanceCtrl',
   scope: $scope
 });

plunker Example 2

System still calling scope function for $modal controller after closing

1 Answers

Option 1

Option 2