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?

score 2 · Answer 1 · answered Jan 16 '17 at 23:38

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

score 2 · Accepted Answer · edited May 23 '17 at 10:29

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 '17 at 10:29

Community

1
1

answered Jan 16 '17 at 23:39

logee

5,017
1
26
34

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 Jan 16 '17 at 23:56
I tried adding the popup to index.html rather than from within the directive with `in page popup` using the same method, and with the logic within the pgCtrl but it didn't work. Any idea why? – Holly Jan 17 '17 at 00:21
@Holy do you have a plunker? – logee Jan 17 '17 at 00:25

score 0 · Answer 3 · answered Jan 16 '17 at 23:43

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

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

3 Answers3