Question

我正在尝试使用Angular ui bootstrap但是我无法让它工作。我想使用alert指令。

我所做的是将以下内容添加到我的html标题中：

<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并且运行正常。我是否正确地注入了依赖关系？难道我也在我的代码中使用常规引导程序？关于可能导致这种情况的任何提示都会非常适用=）！

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

Answer 1

我认为您在上面设置有3个问题

使用addAlert方法第一个参数，提醒类型应为success而不是Success。
同样使用addAlert方法，它需要 3 参数，但是当你调用它时你只能给它 2 参数 - 即。（成功，消息）。最重要的参数是类型和 msg ，但是您 msg 是未定义。
您无法关闭警报，因为您没有提供控制器范围方法来处理它。添加：
```
$scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
}
```
应该解决这个问题。

Link fiddle

Answer 2

两件事：

您不能同时使用Angular UI Bootstrap AND Bootstrap Javascript文件。没有必要。你几乎肯定只想要一个Angular UI Bootstrap。
最重要的是，您正在使用Angular 1.2.19和Angular UI Bootstrap REQUIRES Angular 1.3+。 See here表示最小的依赖关系。

Angular ui.bootstrap.alert没有样式

2 个答案: