angular-bootstrap如何设置警报小部件的类

Question

我正在使用angular-bootstrap

http://angular-ui.github.io/bootstrap/

对于简单按钮，我们可以将类设置为

<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">

或使用我的自定义类

class="my-cool-button"

但是对于警报，

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

颜色为green。我尝试使用class="my-alert-success" purple添加background-color，但它仍然是green。当我删除type="success"时，它会变为yellow。

Answer 1

向元素<alert/>添加一个类并覆盖样式。 我在下面添加了一个课程alert-purple。 的 HTML

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" close="closeAlert($index)" class="alert-purple">{{alert.msg}}</alert>
  <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

<强> CSS

.alert-purple {
    background-color: rgb(216, 194, 216);
    border-color: purple;
    color: purple;
  }

Plunkr Demo 1

<强>更新

我刚注意到。 alert指令将该类添加为 "alert-"+type 。 因此，只需将类型提及为purple或您想要的类型，并在前面使用alert-创建具有相同名称的类。根据需要覆盖样式。

请参阅Plnkr Demo 2。检查JS文件。我将类型更改为“紫色”。

<强> JS

$scope.alerts = [
    { type: 'purple', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];

<强> CSS

.alert-purple {
    background-color: rgb(216, 194, 216);
    border-color: purple;
    color: purple;
  }

<强> HTML

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