将字形图标添加到 angular-ui 警报答案

【问题标题】：Add glyphicon to angular-ui alert将字形图标添加到 angular-ui 警报
【发布时间】：2015-06-30 15:37:15
【问题描述】：

我正在尝试将字形图标添加到默认的 Angular-UI Bootstrap 样式警报中。我在这里和 Plunker 一起玩：

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

这是我想要实现的目标：

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

如何将图像和消息放在一行？

解决方案更新： http://plnkr.co/edit/8YEC5B3Vxp7soWlNBASa?p=preview

【问题讨论】：

标签： angularjs twitter-bootstrap alert angular-ui

【解决方案1】：

ui bootstrap Alert 使用嵌入，所以只需在指令元素中提供它。即

<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

或者如果您想避免重复此操作并在您的应用程序中需要此操作，您也可以覆盖模块中运行块中的模板并对其进行更新以满足您的需求，即：

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

【讨论】：

谢谢。我正在尝试为每种类型的警报添加不同的字形图标。但是该图标会创建一个换行符。查看更新的 Plunker。
@duyn9uyen 正如我在第一个选项中解释的那样，就这样做吧..plnkr.co/edit/T4q9rA?p=preview。即<span ng-class="alert.img"></span>{{alert.msg}}
谢谢！我是 Angular 新手，这对我很有帮助。