系统关闭后仍在调用$modal控制器的作用域函数。

Posted 2021-03-19

我正在做一个AngularJS项目。请记住，这是Angularjs的第1版。在这个项目中，我有一个控制器，它与一个html页面相关联。在这个控制器中，我定义了一个$rootScope的函数。

现在，在这个页面上，我还使用了一个弹出框。我使用$modal组件来显示这个弹出框。这个模态弹出框也被附加在一个控制器上，这个控制器也用$rootScope定义了同样的函数。

下面是我的简单代码。

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>

你可以看到我的代码中，我在页面控制器和模态控制器中定义了相同的功能。当我在调用模态之前点击 "获取记录 "按钮时，系统调用的是页面控制器中定义的函数，这很正常。但当我打开模态后关闭，再点击 "获取记录 "按钮后，系统调用的是模态控制器中定义的功能，而不是页面控制器。

我不明白，为什么在打开模态框后，系统会调用模态控制器的功能。谁能帮我解决这个问题。

答案

我相信你使用的是 AngularJS的Bootstrap 1

为什么会调用内部方法 getRecords() - 因为你重新定义了它。

做。

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

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

而在调用它之后，你得到 "external 2".

---

我不知道你为什么用 $rootScope 里面 $modal 但这不是好的做法。

如果你想调用外部 getRecords，你可以写。

方案一

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

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

和你的模式。

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

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

例子：

---

备选方案2

另一种方法是用同样的 $scope 对于 $modal:

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

例2

---