ui.bootstrap角度警报关闭问题

I am new to angular, trying to figure out how the bootstrap alert work in angular

我是棱角分明的新手,试图弄清楚引导警报是如何工作的

in regular bootstrap something below gives the alert message and it gets closed when clicked on X

在常规引导程序中,下面的内容会显示警告消息,并在单击X时关闭

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

All the examples i saw are using AlertCtrl and needed to code the array of alerts and need to code a method to splice the array when close button clicked.

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

In a Single Page Application, If i want to show only one success alert message when user perform an action

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

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

since the close attribute present the alert is displaying well. when added

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

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

but not able to dismiss the message when clicked on x

但是在点击x时无法忽略该消息

here is the plunker : http://plnkr.co/edit/NfEleLc0Q6pzjirb3DCg

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

am i missing to include any library.

我错过了包括任何图书馆。

2 个解决方案

#1

add this on you include script tags:

在你包含脚本标签上添加:

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

UPDATED:

Like what @Sunil D. mentioned. You don't have to create your own bootstrap alert directive if you are using UI-Bootstrap, it is the purpose of the ui-project. If you look on ui-bootstrap docs about alert, you can see they are using ng-repeat to render alerts and handle remove alerts by just removing the index of the generated alert.

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

#2

it can be as simple as this, without directive or controller:

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

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

#1