AngularJS UI.Bootstrap Alert text not displaying and dismiss button not responding

Question

I'm trying to display a Bootstrap alert by following the example in the documentation. This is my HTML:

<div class='container'>
  <div ng-init="alerts=[{type: 'danger', msg: 'Test'}, {type: 'success', msg: 'Another'}]">
    <alert close='closeAlert($index)' ng-repeat='alert in alerts' type='alert.type'></alert>

And this is the result: Red bar and green bar without text

The text is not showing and clicking on x does not remove the alert. I'm not seeing any Javascript errors. I'm able to use other ui.bootstrap components such as the date picker and modal.

I'm using AngularJS 1.2.13 and ui.bootstrap 0.10.0.

Can you post your JavaScript?

Emerson Farrugia
– Emerson Farrugia

2014-03-14 16:04:26 +00:00
Commented Mar 14, 2014 at 16:04 — Emerson Farrugia
– Emerson Farrugia, Commented Mar 14, 2014 at 16:04

pkozlowski.opensource · Accepted Answer · 2014-03-14 17:50:10Z

2

Text is not showing as the content of the <alert></alert> element is empty in the code you've provided. I guess you wanted to write:

<alert close='closeAlert($index)' ng-repeat='alert in alerts' type='alert.type'>
    {{alert.msg}}
</alert>

Then, for the close "not working" I suspect some scoping issue, but to confirm we would need to see implementation of the closeAlert function. Where / how did you define it?

answered Mar 14, 2014 at 17:50

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS UI.Bootstrap Alert text not displaying and dismiss button not responding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related