Angular js中从动态打开的控制器到父控制器的触发事件

Question

我正在使用 Angular JS 开发 Web 应用程序。我是 Angular JS 的新手。在我的应用程序中，我将 bootstrap.ui JS 用于 Angular js。但是我在使用 bootstrap 模态控制器时遇到了问题。我用新的控制器实例打开 bootstrap 模态。然后我想在按下模态按钮时将事件触发回父控制器。

当按下控制器中的按钮时，我打开 Bootstrap 模态

var app = angular.module('memeApp',['ngRoute','ui.bootstrap','blockUI','ngFileUpload'],function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });


app.controller('DeleteConfirmModalController', ['$scope','$modalInstance','data',function ($scope, $modalInstance,data) {
    $scope.closeDeleteConfirmModal = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.deleteData = function()
    {
       //I want to call deleted function of DefaultController that opened current controller.
    }
}]);

app.controller('DefaultController', ['$scope', 'Upload', '$timeout', '$http','$modal', function ($scope, Upload, $timeout , $http, $modal) {

  $scope.deleted = function(param)
  {
      alert('deleted')
  }    

  $scope.deleteTemplate = function(id,url)
  {
    var modalInstance = $modal.open({
            controller: 'DeleteConfirmModalController',
            templateUrl: $scope.deleteConfirmModalUrl,
            resolve: {
                data: function () {
                    return { id: id, url: url };
                }
            }
        });
  }

}]);

让我解释一下上面的代码。当用户单击 DefaultController 中的按钮时，将调用 deleteTemplate 函数。因此该函数打开 bootstrap 模式创建 DeleteConfirmModalController 的新实例。当用户点击bootstrap模态的删除按钮时，会调用模态控制器的deleteData函数。

所以我评论了我想在那个函数中做什么。我想在 DefaultController 中调用已删除的函数。如何从模态控制器调用父控制器的函数？

Answer 1

您可以通过将您想要的函数作为回调传递给模态运行来轻松做到这一点。

vm.deleteData = function() {
   // do something
}

然后传给

var modalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'vm.deleteConfirmModalUrl',
  controller: 'DeleteConfirmModalController',
  controllerAs: 'vm',
  resolve: {
    deletedCallback: function() {
      return vm.deleted; // notice that I am passing a reference of `deleted` function
    }
  }
});

然后，在模态控制器中，我通过单击按钮将调用连接到此回调函数

.controller('ModalInstanceCtrl', function ($uibModalInstance, deletedCallback) {

    // this will run on an ng-click
    vm.runDeleted = function() {
        if (angular.isFunction(deletedCallback)) {
          deletedCallback("me");
        }
    }
    ...
}

我使用 angular.isFunction 来测试我传递给模态控制器的引用是否确实是函数的引用，如果是，我运行它，然后传递一些值 (在这种情况下，字符串 me) 进入回调。此代码将在 DeleteConfirmModalController 控制器上运行。

Example plunk

Angular js中从动态打开的控制器到父控制器的触发事件

Firing event from dynamically opened controller to parent controller in Angular js

angularjs

angularjs-scope

angular-ui-bootstrap

angularjs-controller

angular-bootstrap