How to pass data from inner controller of modal to outer controller in AngularJs

Question

I'm trying to manipulate data inside a modal in AngularJS and after that, view it outside of the modal. So I have to pass the data from the inner controller (which is used by the modal) to the outer controller. To put the data into the inner controller from the outer one I've done this with help of the option resolve of $modal.open :

myApp.controller('MyCtrl', function ($scope, $modal) {

$scope.number = 1;

$scope.openModal = function () {
    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'modal',
        controller: function ($scope, $modalInstance, number) {
            $scope.number = number;
            $scope.submit = function () {

                //How to iterate var number in the outer controller?
                //$scope.number++;

                $modalInstance.dismiss('cancel');
            }
        },
        resolve: {
            number: function () {
                return $scope.number;
            }
        }
    });
   };
});

Now I want to count number up in the modal and show it outside of the modal. $scope.number affects obviously just the number in the current controller, so how can I set the variable of the outer controller?

Here's my Fiddle.

Your help would be appreciated.

I'm no Angular expert, but I think the recommended approach is to use a service. The service has its own scope, and you inject the service into each controller so the controllers have access to the common variable/value. — Marc
– Marc, Commented May 28, 2015 at 15:29

ABOS · Accepted Answer · 2015-05-28 15:28:36Z

1

Try _scope = $scope; to hold on reference to outside controller. And inside inner controller, use _scope.number++; Working fiddle:

"http://jsfiddle.net/5xop3wL9/5/"

answered May 28, 2015 at 15:28

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zee · Accepted Answer · 2015-05-28 15:29:22Z

0

You can add a reference to $scope of outer controller and then increment the number using the new reference.

...
$scope.number = 1;
$higherScope = $scope;
...
//Inside submit
$scope.submit = function () {

                    //How to iterate var number in the outer controller?
                    $higherScope.number++;

                    $modalInstance.dismiss('cancel');
                }

Updated Fiddle

answered May 28, 2015 at 15:29

Zee

8,4805 gold badges39 silver badges59 bronze badges

2 Comments

user4878548 Over a year ago

Thanks. Is this a better practice than using a service in my case?

Joshua Kelly Over a year ago

No, it's not better practice. Saving data to a service object to be passed around your application is much cleaner than attaching things to scopes.

Joshua Kelly · Accepted Answer · 2015-05-28 15:26:14Z

0

I would save your data to a service so it can be passed between controllers.

myApp.factory('modalDataService', function () {
    var modalData = {}; 
    return {
        getData: function () {
            return modalData;
        },
        setData: function (newModalData) {
            modalData = newModalData;
        },
        resetData: function () {
            modalData = {};
        }
    };
});

You can then access your data from your controllers by passing in the factory as a dependency and calling functions like this:

modalDataService.getData();
modalDataService.setData(newModalData);
modalDataService.resetData();

answered May 28, 2015 at 15:26

Joshua Kelly

1,0739 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to pass data from inner controller of modal to outer controller in AngularJs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related