Question

注意： 让我首先说我已经知道这个question，但解决方案不完整，我不会＃但是在stackoverflow上没有足够的声誉来评论它。所以，我只能选择创建一个重复的问题。

我试图使用angularjs和bootstrap（ui-bootstrap）来显示一个不允许的警报。然而，即使包括ui-bootstrap-tpls - * .js文件（在原始问题上建议的解决方案）之后，它似乎也无法工作。虽然它确实适用于jquery。

请检查此plunker

Answer 1

我找到了一种方法，可以在不向控制器添加额外逻辑的情况下发出不允许的警报。我甚至不需要bootstrap - * - js。基本上我有一个带有关闭按钮的提醒，该按钮在ng-click变量上使用$scope来隐藏ng-show上的父div。（控制器将该变量设置为是否应该最初显示该警报。）

<div class="alert alert-warning" ng-show="show_alert">
  <button type="button" class="close" ng-click="show_alert=false">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

css类alert alert-warning和close由bootstrap设置。

使用上述解决方案查看此plunker。

Answer 2

使用原生Bootstrap alert和angular-ui alert之间存在差异。

对于后者，您需要使用directive。以下是他们网站上的一个例子。

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

请注意，该元素是alert。

您还需要一个注入ui.bootstrap模块的Angular模块。

angular.module('plunker', ['ui.bootstrap']);

Take a look at this plunkr.

Answer 3

您刚刚导入了bootstrap模板，但没有导入角度ui bootstrap javascript。您的示例的导入应如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-0.11.0.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />

此外，您不使用角度应用和控制器。您需要这样才能使警报工作。请查看此处的文档：http://angular-ui.github.io/bootstrap/

要关闭警报，应定义close()功能。这是一个有效的例子：

<!doctype html>
<html>

<head>

    <!-- Will work with jquery (uncomment to try).
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
      -->

    <!-- Can't make it to work with angularjs. -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-0.11.0.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript">
        var app = angular.module('app', ['ui.bootstrap']);

        app.controller('testCtrl', function ($scope) {
            $scope.alerts = [
                { type: 'danger', msg: 'Warning! Best check yo self, you are not looking too good.' }
            ];

            $scope.closeAlert = function(index) {
                $scope.alerts.splice(index, 1);
            };
        });
    </script>
</head>

<body ng-app="app">

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

</body>

</html>

在这里查看plunker：http://plnkr.co/edit/wV1fJO9qAbra7W6J8vz5?p=preview

Answer 4

我遇到了同样的问题（警报没有被暗示）我拥有了我需要导入的所有库

<link rel="stylesheet" href="lib/bootstrap.css">
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery-1.12.4.min.js"></script>

但后来我发现库导入的顺序是个问题。在事情正常工作之后我改变了下面的导入顺序。

<link rel="stylesheet" href="lib/bootstrap.css">
<script src="lib/jquery-1.12.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>

我希望这会有所帮助。谢谢

为什么不允许的警报不被驳回？

4 个答案: