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

Question

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.

I created a small plunker to test your code and it seems to work fine. Which version are you using? And what code lives in view and edit functions? — lzagkaretos
– lzagkaretos, Commented Feb 8, 2018 at 19:45
i tried removing both the functions view and edit, but nothing changes, i didnt include them, for simplicity... — Xsmael
– Xsmael, Commented Feb 8, 2018 at 19:57
thanks to your questionning i found what causes the issue i've updated the plunker with the code to reproduce it. it is because in the controller, i wrote some code to give me access to the scope — Xsmael
– Xsmael, Commented Feb 8, 2018 at 20:01

lzagkaretos · Accepted Answer · 2018-02-08 20:12:45Z

1

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.

answered Feb 8, 2018 at 20:12

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xsmael Over a year ago

Yes it does help :). Thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related