将 Angular 模态数据传递给主控制器

Question

我有一个控制器，我在其中使用模态。请检查这个

'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) {


$scope.adduser = function () {


    var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl
    });

};

//use data value here. 



var ModalInstanceCtrl = function ($scope, $uibModalInstance) {

    var data = "analog";

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


}

]);

如您所见，用户单击了 'Add user' 选项卡。添加用户功能被执行并弹出一个模式。我已经完成了几个内部处理。

最后，我想将一个变量'data'传回主控制器。有人可以给我一个简单的例子，说明如何将数据从模态传输到控制器。

我看过几个例子，明白决心会帮助我实现它。但我对此完全感到困惑...

Answer 1

如果您在 DataController 范围内定义 ModalInstanceCtrl，您应该能够使用闭包共享变量。

例如：

var data = {
   name:"Foo"
}
$scope.data = data;
var ModalInstanceCtrl = function ($scope, $uibModalInstance) {
    //accessing data from the controller using closure.
    data.name = "analog";

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

$scope.adduser = function () {


    var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl
    });

};
$scope.processData = function(){
      //do something with data 
};
$scope.$watch('data', function (old, new){
    //if data changed do somthing
});

//if you use data here it will have no value yet.
//use data value here.

您也可以使用一个服务，让两个控制器都访问它。模态将更改此服务中变量的状态，DataController 将从服务中获取它。

服务示例如下：

DataMod.Service('Data', function () {

    var data = {
        FirstName: ''
    };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
 });

将 Angular 模态数据传递给主控制器

Pass Angular modal data to main controller

javascript

modal-dialog

angularjs

bootstrap-modal