ui.bootstrap 角度警报关闭问题答案

【问题标题】：ui.bootstrap angular alert close issueui.bootstrap 角度警报关闭问题
【发布时间】：2014-08-06 01:22:06
【问题描述】：

我是 Angular 新手，试图弄清楚引导警报如何在 Angular 中工作

在常规引导程序中，以下内容会发出警报消息，并在单击 X 时关闭

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert">&times;</a>
  <strong>Well Done!</strong> Your action is successful.       
</div>

我看到的所有示例都使用 AlertCtrl 并且需要对警报数组进行编码，并且需要编写一个方法来在单击关闭按钮时拼接数组。

在单页应用程序中，如果我只想在用户执行操作时显示一条成功警报消息

.directive('myCustomAlert', function(){
  return {
    restrict:'E',
    template:'<alert type="success" close="close">{{model-dynamic-msg}}</alert>',
    controller:'MyCtrl'
}

由于存在 close 属性，因此警报显示良好。添加时

<my-custom-alert></my-custom-alert>

但点击 x 时无法关闭消息

这里是 plunker：http://plnkr.co/edit/NfEleLc0Q6pzjirb3DCg

我是否缺少包含任何库。

【问题讨论】：

bootstrap alert close 使用这个属性来处理关闭 "data-dismiss="alert"..看看你的模板..

标签： angularjs

【解决方案1】：

在你包含脚本标签上添加这个：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"</script>

更新：

就像 @Sunil D. 提到的那样。如果您使用 UI-Bootstrap，则不必创建自己的引导警报指令，这是 ui-project 的目的。如果您查看有关警报的 ui-bootstrap 文档，您可以看到他们正在使用 ng-repeat 来呈现警报并通过删除生成的警报的索引来处理删除警报。

【讨论】：

OP 使用的是Angular UI Bootstrap，所以他们不需要从 Bootstrap 项目加载 javascript ;)
@SunilD。是的，但没有加载“ui-bootstrap-0.11.0.min.js”..只有“ui-bootstrap-tpls-0.11.0.min.js”..我想是的..
除非我遗漏了什么，否则您可能需要编辑您的答案。在答案中，您指的是 bootstrap javascript 文件，但在您上面的评论中，您随后会引用 ui-bootstrap javascript 文件。
@Darryl_Coder 你的代码运行良好。如果你能做出改变，我会接受答案
@CodeQ 如果您需要站点范围的警报，您可以使用角度服务编写自己的实现，以使其在您的所有应用程序中可用。这是我为我的应用程序编写的用于站点范围警报的简单自定义警报服务。 gist.github.com/darryldecode/456db30246c633bf3ab8 然后您可以在控制器上注入服务并像这样使用它： GlobalLoaderService.show("some alert message","info"); GlobalLoaderService.hide();或链：GlobalLoaderService.show("some alert message","info").hide();

【解决方案2】：

它可以像这样简单，没有指令或控制器：

<alert type="danger" close="bCloseAlert=1" ng-hide="bCloseAlert">i'm alert</alert>

【讨论】：