從動態打開的控制器到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