Search code examples
javascriptangularjstemplatesbootstrap-modalbootbox

ng-bootbox: multiple custom modals on same view (same controller)


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.


Solution

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