将数据从 Angular 模态控制器传回主控制器 [英] Pass data from an Angular modal's controller back to the main controller

问题描述

事情就是这样.我无法将数据从角度模式传递回我需要的控制器.下面给出的代码.

Here is the thing. I am not able to pass data from angular modal back to the controller where i need it. the codes given below.

控制器端

'use strict'
var DataMod = angular.module('Data', ["angularGrid", 'ui.bootstrap.contextMenu', 'ui.bootstrap']);
DataMod.controller('DataController', ['$scope', '$compile', '$uibModal', '$log','$rootScope', '$http', function ($scope, $compile, $uibModal,$log, $rootScope, $http, ngUtilityService) {



//user first clicks on Add button. A modal opens up. ModalInstanceCtrl is the controller used.
$scope.adduser = function () {
var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    controller: ModalInstanceCtrl
});
 //response data should be available here.  
};


var ModalInstanceCtrl = function ($scope, $uibModalInstance) {
//ajax call is made is inside this controller and i get a response. 
//this response is an object. i need to pass this object back to the adduser function. mentioned it above. 
};


}
]);

如上所示，有主控制器.我在里面使用了一个模态，它有自己的控制器.我在该模态控制器内进行 ajax 调用并得到响应.

As you can see above, there is the main controller. I have used a modal inside there which has its own controller. I make ajax call inside that modals controller and get a response back.

我希望该响应结果在 adduser 函数中可用，以便我可以处理该数据.然而，似乎一旦 adduser 函数启动，它就会转到 ModalInstanceCtrl 并在那里结束它的执行.它根本没有回到 adduser 函数.我需要一种方法来返回 adduser 函数.

I want that response as a result to be available back at the adduser function so that i can work with that data. However, it seems that once the adduser function starts, it goes to the ModalInstanceCtrl and ends its execution there. It doesnt come back to the adduser function at all. I need a way to get back to the adduser function.

谁能告诉我如何实现这一目标.还有如何将对象响应从 ModalInstanceCtrl 传递到 adduser 函数内的主控制器.

Can anyone let me know how to achieve this. Also how to pass the object response from ModalInstanceCtrl to the main controller inside adduser function.

推荐答案

看起来您正在使用 Angular Bootstrap Modal，是吗?首先，我会设置它以便模态控制器与主控制器分离.其次，您缺少将响应从模态传递到主控制器所需的承诺.您可以在此处的文档中阅读有关返回模态实例的信息:https://angular-ui.github.io/bootstrap/#/modal

It looks like you are using the Angular Bootstrap Modal, yes? First, I would set it up so that the modal controller is separated out from the main controller. Second, you are missing the promise needed to pass the response from the modal to the main controller. You can read about the return modal instance in the docs here: https://angular-ui.github.io/bootstrap/#/modal

这是来自 Angular Bootstrap plunkr 的示例代码:http://plnkr.co/edit/nGjBtMp33pFDAQ6r7Tew?p=info

This is the example code from the Angular Bootstrap plunkr: http://plnkr.co/edit/nGjBtMp33pFDAQ6r7Tew?p=info

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

var modalInstance = $uibModal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
};
  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

这篇关于将数据从 Angular 模态控制器传回主控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！