将数据从 Angular 模态的控制器传递回主控制器

Pass data from an Angular modal's controller back to the main controller

本文关键字：控制器 数据 Angular 模态      更新时间：2023-09-26

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

控制器侧

'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 调用并得到响应。

我希望该响应作为结果在adduser函数中可用，以便我可以使用该数据。但是，似乎一旦adduser函数启动，它就会转到ModalInstanceCtrl并在那里结束其执行。它根本不会回到adduser函数。我需要一种方法来返回adduser函数。

谁能告诉我如何实现这一目标。以及如何将对象响应从 ModalInstanceCtrl 传递到 adduser 函数中的主控制器。

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

这是来自 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');
  };
});
相关文章：