AngularJS: Angular UI Bootstrap, pass data from modal to controller

Question

I have correctly setup my angular modal, now I want to pass my modal data back to my controller. I am using the below code. First my controller calls my factory service that creates the modal popup:

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

My service is as:

 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;         
  }

See my jsfiddle here for this: http://jsfiddle.net/aman1981/z20yvbfx/17/

I want to pass name & gender that i select on my modal back to my controller, which then populates my page. Let me know what is missing here.

Matej Marconak · Accepted Answer · 2018-06-22 19:30:08Z

I updated AboutController, ModalController and myService with comments. Main idea is return data from ModalController with close method. 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"
        })
    }]);

Matej, thanks how do I pass back to my controller since this is defined in my service. Sorry new to all this here.

Collectives™ on Stack Overflow

AngularJS: Angular UI Bootstrap, pass data from modal to controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related