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

我正在做一个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


给TA打赏
共{{data.count}}人
人已打赏
解决方案

在JavaAndroid中获取开始和结束的一天的纪元第二。

2022-4-20 7:00:07

解决方案

Java8 - 基于POJO更新多个列表。

2022-4-20 7:00:10

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索