CODEWITHSUNDEEP
javascriptangularjstemplatesbootstrap-modalbootbox
Xsmael
Xsmael

Reputation: 3942

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.

Upvotes: 0

Views: 272

Answers (1)

lzagkaretos
lzagkaretos

Reputation: 2910

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.

Upvotes: 1

Related Questions