Passing data through open modal function Angular uibModal

Question

I'm trying to figure out how to pass unit_number into the modal when it pops up. I'm pretty new with Angular and I'm a little confused with what resolve: and group: are doing and how I can include the unit_number in that return statement.

    $scope.openTenantModal = function (unit_number) {
  var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: 'views/addtenantmodal.html',
    controller: 'AddTenantModalCtrl',
    size: 'large',
    resolve: {
      group: function () {
        return $scope.group;
      }
    }
  });
  modalInstance.result.then(function () {
  }, function () {
  });
};

score 33 · Accepted Answer · edited Jun 25 '19 at 17:41

33

You are using ui-bootstrap

Bootstrap components written in pure AngularJS

To pass a variable to a modal's controller you need to use

resolve: {
   A: function() {
       return 'myVal'
   }
}

And then you can access that variable 'A' from the modal`s controller by injecting it

controller: ['A', function(A) {
    // now we can add the value to the scope and use it as we please...
    $scope.myVal = A;
}]

Check out: https://angular-ui.github.io/bootstrap/#/modal

Resolve:

Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property in the router.

And group is just a member (it could be anything you choose)

edited Jun 25 '19 at 17:41

Bucket

7,415
9
35
45

answered Jul 11 '16 at 15:54

WalksAway

2,769
2
20
42

Thanks for the detailed explanation. Took a little tweaking because our controllers are setup a little differently than standard, but got it to work. We have a lot of modals in our build so this will be very helpful moving forward. – Justin Christian Jul 11 '16 at 16:21
Forgetting to inject it was my problem! – Jimenemex Sep 29 '17 at 15:32

Pankaj Parkar · Answer 2 · 2016-07-11T15:57:26.433

Just add a property in resolve object unitNumber with a function returning unit_number value from it. So that you can get the unit_number value inside AddTenantModalCtrl by injecting unitNumber dependency in controller factory function.

resolve: {
  group: function () {
    return $scope.group;
  },
  unitNumber: function(){
    return unit_number
  }
}

Note: Don't directly do unitNumber: unit_number, because when you have that, angular DI system will try to search the dependency with name unit_number(value) and It will try to evaluate it as function. Resultant you will get $injector error in console.

Passing data through open modal function Angular uibModal

2 Answers2