I'm using ngBootBox to have bootstrap modal dialogs in my angularJS project. but I have an issue when i try two custom dialog with different templates in the same page.
<button class="btn btn-primary" ng-click="view(t)"
ng-bootbox-title="<i class='fa fa-eye-opened'></i>Details Ticket"
ng-bootbox-custom-dialog
ng-bootbox-custom-dialog-template="./templates/modal/view-ticket.html"
ng-bootbox-buttons="customDialogButtons"
ng-bootbox-options="dialogOptions">
<span class="glyphicon glyphicon-eye-opened" aria-hidden="true"></span>
View
</button>
<button class="btn btn-primary" ng-click="edit(t)"
ng-bootbox-title="<i class='fa fa-tags'></i>Edition Ticket"
ng-bootbox-custom-dialog
ng-bootbox-custom-dialog-template="./templates/modal/add-ticket.html"
ng-bootbox-buttons="customDialogButtons"
ng-bootbox-options="dialogOptions">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Add
</button>
I have these two buttons, but it seems like the first one's template url gets overridden byu the second one; as a result both the modals opens the same template, that is ./templates/modal/add-ticket.html when i remove the second button, then the first works as expected.
This is not limited to two modals, id i try adding a lot more they will all resolve to the template url of the last one, and all of them will be displaying the same content when opened.
You can use different dialogOptions
objects in the buttons.
$scope.viewDialogOptions= {
scope: $scope
}
$scope.editDialogOptions= {
scope: $scope
}
And in html you can have:
// Button 1
ng-bootbox-options="viewDialogOptions"
// Button 2
ng-bootbox-options="editDialogOptions"
For example, see in updated plunker.
Hope that helps.