AngularJS: pass variable to modal

Question

I use https://github.com/simpulton/angularjs-wizard for my project, it works, (I modified it a little, replaced var app to $scope)

but I need to pass a variable to open function:

$scope.open = function (image)
    {
        $scope.image = image;

        var modalInstance = $uibModal.open({
            templateUrl: 'wizard.html',
            controllerAs: 'modal',
            size: 'lg',
            controller: 'ModalCtrl',
            resolve: {
                image: function () {
                    return image;
                }
            }
        });

        modalInstance.result
            .then(function (data) {
                $scope.closeAlert();
                $scope.summary = data;
            }, function (reason) {
                $scope.reason = reason;
            });
    };

and in html:

ng-click="open(image)"

but image is undefined in my template

it works if I only just the modal window, with the example from https://angular-ui.github.io/bootstrap/#/modal, but not with this wizard example

update:

https://jsfiddle.net/Ginstay/znz64sk3/2/

yes, ajax is completed at the moment, when I open the modal window

and if I add a breakpoint to return image; image is there

Can you create a jsfiddle? It's hard to catch where problem is/ — S Panfilov
– S Panfilov, Commented Mar 25, 2016 at 6:44
Try passing an image url in ng-click="open('urlofimage.com')" — Aman Gautam
– Aman Gautam, Commented Mar 25, 2016 at 6:45
it's not an url, it's an object, retrieved with ajax request because of the same reason, I'm not how I can make a jsfiddle, but I'll try now — user846437
– user846437, Commented Mar 25, 2016 at 6:47
@lasoweq is your image already retrieved by an ajax request when you try to open the modal? The AJAX might still not be processed. — naneri
– naneri, Commented Mar 25, 2016 at 6:52

S Panfilov · Accepted Answer · 2016-03-25 08:18:01Z

5

Try this one

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  resolve: {
    test: function () {
      return 'test variable';
    }
  }
});
};

var ModalInstanceCtrl = function ($scope, $modalInstance, test) {
  $scope.test = test;
};

edited Mar 25, 2016 at 8:18

S Panfilov

17.7k19 gold badges79 silver badges103 bronze badges

answered Mar 25, 2016 at 7:21

Harshil Kulkarni

4115 silver badges20 bronze badges

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

Comments

user846437 · Accepted Answer · 2016-03-25 07:21:31Z

1

I figured it, I needed to add

$scope.image = image;

to ModalCtrl

answered Mar 25, 2016 at 7:21

user846437

Collectives™ on Stack Overflow

AngularJS: pass variable to modal

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related