How to pass arguments and retrieve results from Angular UI Bootstrap Modal using Components

Question

I have simple case where I defined modal as component and open that modal using uiModal.open. However when I want to pass any custom data to that modal using "resolve" on open method and arguments on controller constructor the data is not passed. Also trying to inject $uibModalInstance fails with error Unknown provider: $uibModalInstanceProvider <- $uibModalInstance so I cannot return the results while closing the modal.

Template:

   <div class="modal-header">
    <h3 class="modal-title" id="modal-title">Modal</h3>
</div>
<div class="modal-body" id="modal-body">
    Some text
        <div class="row">
            <div class="col-sm-10">
                    <textarea class="form-control" name="closureNotes" rows="6" data-ng-model="vm.closureNote" required>
                    </textarea>
            </div>
        </div>

</div>

<div class="modal-footer">
    <button class="btn btn-default btn-close" type="submit" ng-click="vm.ok()">Close Exception Request</button>
    <button class="btn btn-danger" type="button" ng-click="vm.cancel()">Cancel</button>
</div>

Component:

import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';

let closeExceptionModalComponent = {
  restrict: 'E',
  bindings: {
        resolve: '<',
    close: '&',
    dismiss: '&'
    },
  template,
  controller,
    controllerAs: 'vm'
};

export default closeExceptionModalComponent;

Controller:

class CloseExceptionModalController {

  constructor() {
         //I need to retrieve here some data from caller
    }

    ok() {
        this.close(); //I need to pass here result to caller using modalInstance.close
    }

    cancel() {
        this.dismiss();
    }
}

export default CloseExceptionModalController;

Caller controller code:

//I need to pass some data to modal
let modalInstance = this.$uibModal.open({
    animation: true,
    component: 'closeExceptionModal',
    appendTo: angular.element(document.body),
})

modalInstance.result.then( (result) => {
    alert(result); //this must be result data from modal
}, () => {
});

score 2 · Answer 1 · answered Apr 21 '17 at 14:06

I spent almost three hours researching that issue, I tried to passing $modalInstance, $uibModalInstance, etc.. I tried resolve and constructor arguments, I searched a lot of threads on stackoverflow each with no luck suggesting upgrade of ui.bootstrap, angularjs etc..

The core issue is that what I try to do in different way is to use component to define modal not to inline define the controller and indicated template within the code of "caller" controller.

Finally with help of some partial knowledge gathered from many threads I came with this wonderful and easy solution.

To pass any data to component based modal and modalInstance all we have to do is update the component definition bindings section:

import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';

let closeExceptionModalComponent = {
  restrict: 'E',
  bindings: {
        resolve: '<', //this let us pass any data from caller constructor
    modalInstance: '<', //modalInstance will be auto injected
    close: '&',
    dismiss: '&'
    },
  template,
  controller,
    controllerAs: 'vm'
};

export default closeExceptionModalComponent;

The calling of modal should look like this:

let modalInstance = this.$uibModal.open({
    animation: true,
    component: 'closeExceptionModal',
    appendTo: angular.element(document.body),
    resolve: {
        modalData: function() {
            return "test";
        }
    }
})

modalInstance.result.then( (result) => {
    alert(result);
}, () => {
});

And my final modal controller looks like this:

class CloseExceptionModalController {

  constructor() {
        this.$ctrl = this; //we store the controller instance

        console.log(this.$ctrl.resolve.modalData); //here is my input data
    }

    ok() {
        //modal instance is auto injected and we can call close passing result
        this.$ctrl.modalInstance.close(this.closureNote);
    }

    cancel() {
        this.dismiss();
    }
}

export default CloseExceptionModalController;

I hope this will help others trying to do the ui bootstrap modal with component and pass/return data! :)

How to pass arguments and retrieve results from Angular UI Bootstrap Modal using Components

1 Answers1