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。主要思想是使用ModalController方法从close返回数据。 Fiddle

    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"
        })
    }]);

AngularJS：Angular UI Bootstrap，将数据从模态传递到控制器

1 个答案: