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

Question

我正在开发一个使用Angular JS的Web应用程序。我是Angular JS的新手。在我的应用程序中，我为Angular js使用了bootstrap.ui JS。但我在自举模态控制器有问题。我用新的控制器实例打开引导模式。然后，当按下模式按钮时，我想将事件触发回父控制器。请参阅下面的我的场景。

我打开引导模式当按钮被点击下面一样在控制器

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的新实例。当用户点击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