Search code examples
javascriptangularjsangularjs-scopemodal-dialogangular-ui-bootstrap

Passing data through open modal function Angular uibModal


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 () {
  });
};

Solution

  • 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)