Passing value to modal scope in angular ui-bootstrap

Question

I have a form setup in angular and am using ui-bootstrap for a modal dialog that appears before submission is complete. My site is setup in Sharepoint and uses a context to determine if they are on English or Spanish version of the site and display the proper language content. I want to pass the bool value IsInEnglish to the modal to display the correct <div> but I am not finding a solution to pass this value to the scope of the modal.

        $scope.continue = function () { //this is off an ng-click on a button

        var modalInstance = $modal.open({
            templateUrl: '_layouts/Applications/VolunteerApp/modal/myModal.html',
            controller: 'vAppController'
        });

        modalInstance.opened.then(function () {
            $scope.modalIsInEnglish = IsInEnglish;

        });
    };

The Head Rush · Accepted Answer · 2015-07-13 15:44:08Z

3

Add a resolve to $modal's instantiation object:

    var modalInstance = $modal.open({
        templateUrl: '_layouts/Applications/VolunteerApp/modal/myModal.html',
        controller: 'vAppController',
        resolve: {
          myVar: function() {
            return someVal;
          }
        }
    });

and then pass someVal as an argument of the function that invokes the modal:

 $scope.continue = function (someVal)

To access someVal in the modal controller, pass it in as an argument for the modal controller:

function myModalController($scope, someVal) { // do stuff }

edited Jul 13, 2015 at 15:44

answered Jul 13, 2015 at 15:22

The Head Rush

3,3763 gold badges30 silver badges47 bronze badges

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

6 Comments

Spacemancraig Over a year ago

So, if I was setting that value to an ng-show on my modal how would that look? ng-show="someVal"?

The Head Rush Over a year ago

Assign someVal to a variable that is accessible from the view. If you are using $scope, do something like $scope.showMyElement = someVal. Then someVal will be accessible to the ngShow directive in the view. Also note the change in my original response. You'll need to pass any value(s) in the resolves into the modal controller as argument(s).

The Head Rush Over a year ago

If my reply helped, any chance you could accept it as the answer?

The Head Rush Over a year ago

@Spacemancraig Well, i was in the process of updating your plnkr when something broke and all i get now (even if i create a new plnkr) is an error message about the payload needing to be a string... You had a couple problems 1) IsInEnglish was defined in plain ol' Javascript. As such, it is outside of angular's namespace, so the value was undefined, and 2) you weren't passing the engVar resolve variable in the modal controllers argument list. Check out my changes and see if they solve your issue.

Spacemancraig Over a year ago

I'm off site today working with a dev firm on another project and their wifi went out, fortunately I did see and save the edits you made. I applied that to my solution and that solve my problem!

|

Collectives™ on Stack Overflow

Passing value to modal scope in angular ui-bootstrap

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related