Question

我正在使用Angular JS开发Web应用程序。我是Angular JS的新手。在我的应用程序中我使用bootstrap.ui JS for 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来测试我传递给模态控制器的引用是否确实是函数的引用，如果是，我运行它，并传递一些值（在这种情况下是字符串{ {1}}）进入回调。此代码将在me控制器上运行。

Example plunk

在Angular js

1 个答案: