Блог

Я разрабатываю веб-приложение с использованием Angular JS. Я новичок в Angular JS. в моем приложении я использую bootstrap.ui JS для Angular js. Но у меня проблема с модальным контроллером начальной загрузки. Я открываю загрузочный модал с новым экземпляром контроллера. Затем я хочу запустить событие обратно на родительский контроллер при нажатии кнопки modal.

Я открываю загрузочный режим при нажатии кнопки, как показано ниже, в контроллере

 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 modal, будет вызвана функция deleteData модального контроллера.

Итак, я прокомментировал, что я хочу сделать внутри этой функции. Я хочу вызвать удаленную функцию внутри DefaultController. Как я могу вызвать эту функцию родительского контроллера из модального контроллера?

Вы можете сделать это легко, передав функцию, которую вы хотите запустить, в качестве обратного вызова модальному.

 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 контроллере.

Пример plunk