Angular ui.bootstrap.alert 没有样式

Question

我正在尝试 Angular ui bootstrap 但我无法正常工作。我想使用警报指令。

我所做的是将以下内容添加到我的 html header:

<link href="stylesheets/bootstrap.min.css" rel="stylesheet">    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="javascripts/ui-bootstrap-tpls-0.13.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="javascripts/angularApp.js"></script>

这是我的 html 警报：

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

我将依赖项注入 ui.bootstrap:

var app = angular.module('e-log', ['ui.router', 'ui.bootstrap']);

我的控制器是这样的：

$scope.alerts = [];
var addAlert = function (type, msg) {
    $scope.alerts.push({
        "type": type,
        "msg": msg
    });
};
addAlert("success", "A message");

$scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
}

现在，当我加载页面时，html 看起来像这样：

<alert ng-repeat="alert in alerts" type="success" close="closeAlert($index)" class="ng-binding ng-scope">A message</alert>

它显示为纯文本，无法关闭它并且根本没有样式。

我尝试做的是将其添加到 plunker 中，效果很好。我是否正确注入了依赖项？难道我在代码中也使用了正则bootstrap？任何关于可能导致这种情况的提示都将非常有用 =)!

编辑：根据我目前收到的建议进行编辑。

Answer 1

我认为你上面的设置有3个问题

使用 addAlert 方法第一个参数，警报 type 应该是 success 而不是 Success.
还有 addAlert 方法，它需要 3 个参数，但是你在调用它时只给它 2 个参数 - IE。（成功，一条消息）。最重要的参数是 type 和 msg 但你给 msg 是 undefined .
您无法关闭警报，因为您没有给控制器作用域方法来处理它。添加：
```
$scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
}
```
应该可以解决这个问题。

Link fiddle 看你的喜好

Answer 2

两件事：

您不能同时使用 Angular UI Bootstrap 和 Bootstrap Javascript 文件。这不是必需的。您几乎可以肯定只想要 Angular UI Bootstrap 一个。
最重要的是，您使用的是 Angular 1.2.19 和 Angular UI Bootstrap REQUIRES Angular 1.3+。 See here 最小依赖性。

Angular ui.bootstrap.alert 没有样式

Angular ui.bootstrap.alert have no styling

angularjs

angular-ui-bootstrap