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

【问题标题】：Firing event from dynamically opened controller to parent controller in Angular js在Angular js中从动态打开的控制器到父控制器的触发事件
【发布时间】：2016-10-01 14:28:36
【问题描述】：

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

当在控制器中单击按钮时，我会打开 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 函数。因此该函数打开引导模式创建 DeleteConfirmModalController 的新实例。当用户点击引导模态的删除按钮时，模态控制器的deleteData函数会被调用。

所以我评论了我想在该函数中执行的操作。我想在 DefaultController 中调用已删除的函数。如何从模态控制器调用父控制器的该功能？

【问题讨论】：

标签： angularjs angularjs-scope angular-ui-bootstrap angularjs-controller angular-bootstrap

【解决方案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

【讨论】：

谢谢。这行得通。非常感谢您的支持。