Can't pass a parameter to my ui Modal with AngularJS

Question

In my angularJS app, I'm trying to pass a parameter to a modal popup so that when the Modal link is click, a name is displayed in the popup. The modal link is coming from a custom directive which is getting the list on names from an external service.

I've tried following this tutorial to Create an Angularjs Popup Using Bootstrap UI along with the documentation for $uibModal as that tutorial is a bit outdated.

I can get the modal PopUp and controller working but I can't pass a parameter to it.

I replicated the issue on Plunker.

This problem is I can't get the titlename param passed to the popupController from the listings directive (see script.js in Plunker). I don't think I have the resolve set up correctly. With the debugger set in Chrome I can see the titlename value up to this point.

app.directive('listings', [function(){
    return {
        restrict: 'E',
        ...
        controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
            $scope.open = function (titlename) {
                var uibModalInstance = $uibModal.open({
                    templateUrl: 'popup.html',
                    controller: 'popupController',
                    titlename: titlename,
                    resolve: {
                        item: function(){
                            return titlename;
                        }
                    }
                });
            }
        }]
    };
}]);

But it doesn't get passed to the popupController. In the below code the titlename has value undefined

app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance, titlename) {
    $scope.title1 = titlename;
    $scope.close = function () {
        $uibModalInstance.dismiss('cancel');
    };
}]);

Any idea why this is happening and how I can fix it? Is this the correct way to use resolve in AngularJS?

Community · Accepted Answer · 2017-05-23 10:29:24Z

2

You don't need a double brace when using ng-click. See this post for more information on using the double curly braces. So your listings directive should be something like this. You were passing the actual string '{{item.name}}'

<a href="#" ng-click="open(item.name)">{{item.name}} -Popup</a>

Then in your popupController, you were not passing the resolved item value. The controller should read:

app.controller('popupController', ['$scope','$uibModalInstance', 'item', function ($scope,$uibModalInstance, titlename) {

See plunker

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Jan 16, 2017 at 23:39

logee

5,0321 gold badge29 silver badges36 bronze badges

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

3 Comments

Holly Over a year ago

thank you, that was it exactly. I had tried passing the item value before and a bunch of other ways but with '{{item.name}}' it kept not working, thanks a mil

Holly Over a year ago

I tried adding the popup to index.html rather than from within the directive with <a ng-click="pgCtrl.open(pgCtrl.obj[1].name)">in page popup</a> using the same method, and with the logic within the pgCtrl but it didn't work. Any idea why?

logee Over a year ago

@Holy do you have a plunker?

Phil · Accepted Answer · 2017-01-16 23:38:30Z

2

First, you want to pass item.name, not the literal string '{{item.name}}' to your open method so change your template to

ng-click="open(item.name)"

Second, your resolved property is named item but you seem to be expecting titlename so change it to

resolve: {
    titlename: function() {
        return titlename;
    }
}

And finally, you don't have an injection annotation for titlename in your controller so you need to add it

app.controller('popupController', ['$scope','$uibModalInstance', 'titlename',
function ($scope,$uibModalInstance, titlename) {
    // ...
}])

Fixed Plunker ~ http://plnkr.co/edit/ee7Psz2jXbVSkD0mfhS9?p=preview

answered Jan 16, 2017 at 23:38

Phil

166k25 gold badges265 silver badges269 bronze badges

Comments

jlewkovich · Accepted Answer · 2017-01-16 23:43:29Z

First, in your listingsDirective.html, don't use curly brackets to pass in variables. Also, by adding titlename1 to the directive $scope and sharing that parent scope with the child modal, you can access the variables in your modal.

app.directive('listings', [function(){
    return {
        restrict: 'E',
        scope: {
            data:'=',
        },
        templateUrl: 'listingsDirective.html',
        replace: true,
        controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
            $scope.open = function (titlename) {
              $scope.titlename = titlename;
                var uibModalInstance = $uibModal.open({
                    templateUrl: 'popup.html',
                    controller: 'popupController',
                    scope: $scope,
          resolve: {
            item: function(){
              return $scope.titlename;
            }
          }
                });
            }
        }]
    };
}]);

app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance) {
    $scope.title1 = $scope.titlename;
    $scope.close = function () {
        $uibModalInstance.dismiss('cancel');
    };
}]);

New Plunkr: http://plnkr.co/edit/RrzhGCLuBYniGGWvRYI9?p=preview

Collectives™ on Stack Overflow

Can't pass a parameter to my ui Modal with AngularJS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related