AngularJS：Angular UI Bootstrap，將數據從模態傳遞到控制器

Question

我已經正確設置了角度模態，現在我想將模態數據傳回控制器。 我正在使用以下代碼。 首先，我的控制器調用我的工廠服務，該服務創建模式彈出窗口：

$scope.mymodal = myService.openModal(data);

我的服務是：

 function openModal (data) {
         var uData = null;
        if (data) {
            uData = {
                userName : data.setName,
                gender : data.gender
            }
        }
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: 'ModalController',
            backdrop: 'static',
            keyboard: false,
            resolve: {
                data: function () {
                    return uData;
                }
            }
        });

        modalInstance.result.then(function () {
            return;
        }, function () {

            });
        return modalInstance;         
  }

為此，請參閱我的jsfiddle： http : //jsfiddle.net/aman1981/z20yvbfx/17/

我想將我在模式中選擇的姓名和性別傳遞回我的控制器，該控制器然后填充我的頁面。 讓我知道這里缺少什么。

Answer 1

我用注釋更新了AboutController ， ModalController和myService 。 主要思想是使用close方法從ModalController返回數據。 小提琴

    var app = angular.module('myApp', ['ui.router','ui.bootstrap']);

        app.controller('IndexController', function($scope, $log) {

        });

    app.controller("AboutController", ['$location', '$state', '$scope', '$filter','myService', function($location, $state, $scope, $filter, myService) {
     var data = "";
       $scope.mymodal = myService.openModal(data);

       // after modal is close, then this promise is resolve
       $scope.mymodal.then(function(resp){
            console.log(resp);
       })

    }]);

    app.controller("ModalController", function($location, $state, $scope, $filter, $modalInstance) {
          $scope.cancel = function () {
                $modalInstance.dismiss('cancel');    
                $state.go('index');
            };
             $scope.done = function () {
// return data on close modal instance                


$modalInstance.close({genger:$scope.gender,userName:$scope.userName});           
                };
        });

    app.factory('ApiFactory', function ($http) {
        var factory = {};


        return factory;
    });

    app.factory("myService",[ "$state", "$modal", "ApiFactory",
        function ($state, $modal, factory) {
                 var service = {
                openModal: openModal
           };

           function openModal (data) {
                 var uData = null;
                if (data) {
                    uData = {
                        userName : data.setName,
                        gender : data.gender
                    }
                }
                var modalInstance = $modal.open({
                    templateUrl: 'modal.html',
                    controller: 'ModalController',
                    backdrop: 'static',
                    keyboard: false,
                    resolve: {
                        data: function () {
                            return uData;
                        }
                    }
                });
                // on close, return resp from modal
                modalInstance.result.then(function (resp) {
                    return resp;
                }, function () {

                    });
                // return modal instance promise
                return modalInstance.result;


          }

          return service;
        }
    ]);  

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
       $urlRouterProvider.otherwise('/index');
      $stateProvider
        .state('index', {
          url: '^/index',
          templateUrl: 'index.html',
          controller: "IndexController"
        })
        .state('about', {
          url: '^/about',
          templateUrl: 'about.html',
          controller: "AboutController"
        })
    }]);