自定义 Bootstrap UI 警报 AngularJS
Custom Bootstrap UI alert with AngularJS
我在我的应用程序中使用 angular-ui-bootstrap
库。我需要在触发模式 window 内使用按钮创建自定义警报。
我试过两种选择:
- 从
ui-bootstrap-tpls.js
重新定义模块 angular.module("template/alert/alert.html", [])
。没有工作,因为我没有设法实现按钮触发弹出窗口 window。
- 创建一个基于
"template/alert/alert.html"
的自定义模块。为了使弹出 window 正常工作,我发现自己迷失在许多控制器中。
实现该目标的最佳方法是什么?
只需将您的 alert
指令放入 modal
模板中:
如果我理解了这个问题,您想向将启动模式的警报添加一个按钮。
Plunker Demo
最简单的方法是将您的按钮简单地添加到警报模板中。在 Plunker 演示中,我复制了 UI Bootstrap 警报和模式演示的内容。然后我复制了警报模板并将其添加到页面上的脚本标记中。在标准警报模板中,我添加了一个按钮,如下所示:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
这是一个非常基本的方法,但对您来说应该是一个很好的起点。如果我在生产中这样做,我会把我的自定义模板添加到模板缓存中,而不是在页面本身上使用脚本标签,我会为我的模式按钮创建一个自定义指令,这样我就可以将任何相关信息从我的警报传递到我的模态实例并取消必须在按钮本身上对 ng-controller 进行硬编码。
我在我的应用程序中使用 angular-ui-bootstrap
库。我需要在触发模式 window 内使用按钮创建自定义警报。
我试过两种选择:
- 从
ui-bootstrap-tpls.js
重新定义模块angular.module("template/alert/alert.html", [])
。没有工作,因为我没有设法实现按钮触发弹出窗口 window。 - 创建一个基于
"template/alert/alert.html"
的自定义模块。为了使弹出 window 正常工作,我发现自己迷失在许多控制器中。
实现该目标的最佳方法是什么?
只需将您的 alert
指令放入 modal
模板中:
如果我理解了这个问题,您想向将启动模式的警报添加一个按钮。
Plunker Demo
最简单的方法是将您的按钮简单地添加到警报模板中。在 Plunker 演示中,我复制了 UI Bootstrap 警报和模式演示的内容。然后我复制了警报模板并将其添加到页面上的脚本标记中。在标准警报模板中,我添加了一个按钮,如下所示:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
这是一个非常基本的方法,但对您来说应该是一个很好的起点。如果我在生产中这样做,我会把我的自定义模板添加到模板缓存中,而不是在页面本身上使用脚本标签,我会为我的模式按钮创建一个自定义指令,这样我就可以将任何相关信息从我的警报传递到我的模态实例并取消必须在按钮本身上对 ng-controller 进行硬编码。