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の新しいインスタンスを作成するブートストラップモーダルを開きます。ブートストラップモーダルの削除ボタンをクリックすると、モーダルコントローラのdeleteData関数が呼び出されます。

私はその機能の中で何をしたいとコメントしました。 DefaultControllerの中で削除された関数を呼びたいモーダルコントローラから親コントローラのその機能をどのように呼び出すことができますか？

Answer 1

コールバックとして実行する関数をモーダルに渡すことで、簡単に行うことができます。

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

そして参照どうかテストするangular.isFunctionを使用

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

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

をクリックモーダルコントローラ内部私はボタンで、このコールバック関数への呼び出しを配線し、そして

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 
    } 
    } 
}); 

に渡します私はモーダルコントローラに渡されましたが、関数の場合はそれが実際に実行されていますが、何らかの値（この場合は文字列me）を呼び出しに渡しますバック。 このコードはDeleteConfirmModalControllerコントローラで実行されます。

Example plunk