I am facing a simple scenario where I have defined a modal as a component and opened that modal using `uiModal.open`. However, when I try to pass custom data to the modal using "resolve" in the open method and arguments in the controller constructor, the data is not being passed. Additionally, attempting to inject `$uibModalInstance` results in an error: Unknown provider: $uibModalInstanceProvider <- $uibModalInstance. This prevents me from returning the results upon closing the modal.
Custom 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 Setup:
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 Logic:
class CloseExceptionModalController {
constructor() {
//Need to retrieve some data from caller here
}
ok() {
this.close(); //Need to return result to caller using `modalInstance.close`
}
cancel() {
this.dismiss();
}
}
export default CloseExceptionModalController;
Caller Controller Code:
//Need to pass data to modal
let modalInstance = this.$uibModal.open({
animation: true,
component: 'closeExceptionModal',
appendTo: angular.element(document.body),
})
modalInstance.result.then( (result) => {
alert(result); //This should be the result data from the modal
}, () => {
});