0

I'm trying to add a glyphicon to a default Angular-UI Bootstrap style alert. I'm playing with the Plunker here:

http://plnkr.co/edit/KeI1gGqa46d3lptIcoF9?p=preview

Here is what I'm trying to achieve:

<div class="alert alert-warning">
    <span class="glyphicon glyphicon-exclamation-sign"></span>
    <span>What I want!</span>
</div>

How can I have the image and the message on one line?

Resolution Update: http://plnkr.co/edit/8YEC5B3Vxp7soWlNBASa?p=preview

1 Answer 1

0

ui bootstrap Alert uses transclusion so just provide it within the directive element. i.e

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
     <span class="glyphicon glyphicon-exclamation-sign"></span> 
     <!--<span ng-class="alert.img"></span> -->
    {{alert.msg}}
</alert>

Plnkr

or if you want to avoid repeating this and need this across your application you can as well override the template in the run block in your module and update it to match your needs, i.e do:

app.run(['$templateCache',function($templateCache){
  $templateCache.put("template/alert/alert.html",
    "<div class=\"alert\" ng-class=\"['alert-' + (type || 'warning'), closeable ? 'alert-dismissable' : null]\" role=\"alert\">\n" +
    "    <button ng-show=\"closeable\" type=\"button\" class=\"close\" ng-click=\"close()\">\n" +
    "        <span aria-hidden=\"true\">&times;</span>\n" +
    "        <span class=\"sr-only\">Close</span>\n" +
    "    </button>\n" +
    "    <div><span class='glyphicon glyphicon-exclamation-sign'></span>&nbsp;<span ng-transclude></span></div>\n" +
    "</div>");
}]);

Plnkr

3
  • Thanks. I'm trying to add a different glyphicon to each type of alert. But the icon creates a line break. See the updated Plunker.
    – duyn9uyen
    May 20, 2015 at 3:08
  • @duyn9uyen As i explained in my first option just do it this way.. plnkr.co/edit/T4q9rA?p=preview. i.e <span ng-class="alert.img"></span>{{alert.msg}}
    – PSL
    May 20, 2015 at 3:12
  • Thanks! I'm new to Angular and this really helped me.
    – duyn9uyen
    May 20, 2015 at 3:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.