ng-bootbox:同一视图(同一控制器)上的多个自定义模式
ng-bootbox: multiple custom modals on same view (same controller)
我正在使用 ngBootBox 在我的 angularJS 项目中设置 bootstrap 模态对话框。但是当我尝试在同一页面中使用不同模板的两个自定义对话框时出现问题。
<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>
我有这两个按钮,但似乎第一个的模板 url 被第二个覆盖了;结果,两个模态框打开了相同的模板,即 ./templates/modal/add-ticket.html
当我删除第二个按钮时,第一个按预期工作。
这不限于两个模式,我尝试添加更多,它们都将解析为最后一个的模板 url,并且它们在打开时都将显示相同的内容。
您可以在按钮中使用不同的 dialogOptions
对象。
$scope.viewDialogOptions= {
scope: $scope
}
$scope.editDialogOptions= {
scope: $scope
}
而在 html 你可以有:
// Button 1
ng-bootbox-options="viewDialogOptions"
// Button 2
ng-bootbox-options="editDialogOptions"
例如,请参阅已更新的 plunker。
希望对您有所帮助。
我正在使用 ngBootBox 在我的 angularJS 项目中设置 bootstrap 模态对话框。但是当我尝试在同一页面中使用不同模板的两个自定义对话框时出现问题。
<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>
我有这两个按钮,但似乎第一个的模板 url 被第二个覆盖了;结果,两个模态框打开了相同的模板,即 ./templates/modal/add-ticket.html 当我删除第二个按钮时,第一个按预期工作。
这不限于两个模式,我尝试添加更多,它们都将解析为最后一个的模板 url,并且它们在打开时都将显示相同的内容。
您可以在按钮中使用不同的 dialogOptions
对象。
$scope.viewDialogOptions= {
scope: $scope
}
$scope.editDialogOptions= {
scope: $scope
}
而在 html 你可以有:
// Button 1
ng-bootbox-options="viewDialogOptions"
// Button 2
ng-bootbox-options="editDialogOptions"
例如,请参阅已更新的 plunker。
希望对您有所帮助。