I recently utilized the modal example from https://angular-ui.github.io/bootstrap/ and everything worked perfectly.
By using the code snippet below, I was able to successfully open the modal as shown in the example:
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '/resources/views/pages/tasks/edit.html',
size: size,
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
For the trigger/button, I used the following code:
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
Everything was functioning smoothly till this point. However, now I am interested in opening the modal 'aside' (to slide in from the right side of the screen). I came across this particular code snippet:
<button class="btn white active"
data-toggle="modal"
data-target="#task_modal"
ui-toggle-class="modal-open-aside"
ui-target="body" >
</button>
When combined with the following div, it opens a modal from the right side of the screen:
<div class="modal fade inactive ng-scope " id="task_modal" data-backdrop="false" style="display: none;">
<div class="right white b-l col-md-8">
</div>
</div>
The only issue is that with the second example, I am unable to set certain options such as keyboard: true or closing the modal on backdrop click.
I have tried searching for a solution extensively, but most resources suggest additional plugins. I believe there should be a way to fix this without relying on extra plugins. Can someone assist me with this?