passing objects to modal dialog in AngularJS/bootstrap

Question

I'm trying to pass an object into a modal dialog in a bootstrap/angularJS using the code below. I did this in the style of the answer given at AngularJS UI Bootstrap modal is unable to perform functions from scope. When the modal form is supposed to open from a call to editGroup(), I get the following error:

Error: [$injector:unpr] Unknown provider: selGroupProvider <- selGroup

var EditGroupModalController = function ($scope, $modalInstance, selGroup) {        
        $scope.user = $sessionStorage.user;
        $scope.selGroup = selGroup;

        $scope.closeModal = function () {
            $modalInstance.close();
        };
    };

    $scope.editGroup = function (selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
        $modal.open({
            templateUrl: 'app/views/administration/advanced/editgroup.html',
            controller:  ['$scope', '$modalInstance','$modal','$sessionStorage','advancedService','selGroup', EditGroupModalController],
            size: 'lg',
            windowTemplateUrl:'app/views/partials/modaltemplatedraggable.html',
            backdrop:'static',
            resolve: {
                item: function () {
                    return selGroup;
                }
            }
        });
    };

The official description of this error is here; however, I do not understand why I am receiving this error. Any help with this would be greatly appreciated.

user3707125 · Accepted Answer · 2015-05-28 01:03:33Z

2

Your controller's dependencies list doesn't match controller's function definition: in $modal.open you've listed six dependencies, while in function only three are present.
Dependencies are injected by resolve keys - in your case the key is item.

Necessary changes to your code in order to make it work:

Replace (1)

var EditGroupModalController = function ($scope, $modalInstance, selGroup)

with

var EditGroupModalController = function ($scope, $modalInstance, $modal, $sessionStorage, advancedService, selGroup)

And replace (2)

resolve: {
    item: function () {

With

resolve: {
    selGroup: function () {

answered May 28, 2015 at 1:03

user3707125

3,48916 silver badges23 bronze badges

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

1 Comment

Douglas C Over a year ago

Your corrections worked perfectly. Thank you for the explanation, as well!

Patricio Marrone · Accepted Answer · 2015-05-28 02:56:42Z

You should name the variable in the resolve as 'selGroup' instead of 'item' so that it can be correctly injected.

Also, the names of the declared dependencies should match the function definition. I put together this simple demo.

angular.module('test', ['ui.bootstrap']).controller('TestController', function($scope, $modal) {
  var sel = {name: "A group"};
  var EditGroupModalController = function($scope, $modalInstance, selGroup) {
    $scope.selGroup = selGroup;
    $scope.closeModal = function() {
      $modalInstance.close();
    };
  };

  $scope.editGroup = function(selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
    $modal.open({
      template: '<div>Test {{selGroup.name}}</div>',
      controller: ['$scope', '$modalInstance', 'selGroup', EditGroupModalController],
      size: 'lg',
      backdrop: 'static',
      resolve: {
        selGroup: function() {
          return sel;
        }
      }
    });
  };
});

http://plnkr.co/edit/ec1PjkDZtf4yqINONnX5?p=preview

Collectives™ on Stack Overflow

passing objects to modal dialog in AngularJS/bootstrap

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related