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

Question

我正在尝试将字形图标添加到默认的 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

Answer 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

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

Add glyphicon to angular-ui alert

angularjs

twitter-bootstrap

alert

angular-ui