为什么不关闭可解除警报？

Question

Note: Let me start by saying that I'm aware of this question but the solution is incomplete and I don't yet have not enough reputation on stackoverflow to comment on it. 注意： 让我首先说我知道这个问题，但是解决方案是不完整的，并且我在stackoverflow上的信誉还不足以对此发表评论。 So, I was left with the only option of creating a duplicate question. 因此，我只有创建重复问题的唯一选择。

I'm trying to use angularjs and bootstrap (ui-bootstrap) to show a dismissible alert. 我正在尝试使用angularjs和bootstrap（ui-bootstrap）显示可忽略的警报。 However, even after including ui-bootstrap-tpls-*.js file (solution suggested on original question) it doesn't seem to work. 但是，即使包含ui-bootstrap-tpls-*。js文件（原始问题建议的解决方案），它似乎也不起作用。 Although it does work with jquery. 虽然它确实适用于jquery。

Please check this plunker 请检查这个矮人

Answer 1

I found a way to have a dismissible alert without adding extra logic to the controller. 我找到了一种在不向控制器添加额外逻辑的情况下发出可忽略警报的方法。 I don't even need bootstrap-*-js. 我什至不需要bootstrap-*-js。 Basically I have an alert with a close button that uses ng-click on a $scope variable to hide the parent div on ng-show . 基本上我有一个带有关闭按钮的警报，该按钮使用ng-click $scope变量在ng-show上隐藏父div。 (The controller sets that variable to whether that alert should be initially shown or not.) （控制器将变量设置为是否应首先显示该警报。）

<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>

The css classes alert alert-warning and close are styled by bootstrap. css类alert alert-warning和close由引导程序设置样式。

Check out this plunker with the above solution. 使用上述解决方案检查此矮人。

Answer 2

There is a difference between using the native Bootstrap alert and angular-ui alert . 使用本机Bootstrap alert和angular-ui alert之间是有区别的。

For the latter, you need to use a directive . 对于后者，您需要使用directive 。 Here is an example from their website. 这是他们网站上的一个例子。

<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>

Notice that the element is an alert . 注意该元素是一个alert 。

You also need to have an Angular module which injects the ui.bootstrap module. 您还需要有一个用于注入ui.bootstrap模块的ui.bootstrap模块。

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

Take a look at this plunkr. 看看这个笨蛋。

Answer 3

You just imported the bootstrap templates, but not the angular ui bootstrap javascript. 您只是导入了引导程序模板，但未导入angular ui引导程序javascript。 The imports for your example should look like this: 您的示例的导入应如下所示：

<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" />

Furthermore, you don't use an angular app and controller. 此外，您无需使用角度应用程序和控制器。 You need this to make the alerts work. 您需要这样做才能使警报正常工作。 Check the documentation here: http://angular-ui.github.io/bootstrap/ 在此处查看文档： http : //angular-ui.github.io/bootstrap/

To close the alert, a close() function should be defined. 要关闭警报，应定义一个close()函数。 Here is a working example: 这是一个工作示例：

<!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>

Check out the plunker here: http://plnkr.co/edit/wV1fJO9qAbra7W6J8vz5?p=preview 在此处查看插件： http ://plnkr.co/edit/wV1fJO9qAbra7W6J8vz5?p=preview

Answer 4

I was experiencing the same issue(alerts not being dimissed) I had all the libraries I need imported like this 我遇到了同样的问题（未忽略警报），我需要像这样导入所有库

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

But later on I found that the order of the library imports is the problem. 但是后来我发现库导入的顺序是个问题。 And I change the import order like the following after that things are working okey. 在一切正常之后，我按如下所示更改了导入顺序。

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

I hope this helps. 我希望这有帮助。 Thank you 谢谢

为什么不关闭可解除警报？

问题描述

4 个解决方案

解决方案1
4 已采纳 2014-05-30 17:36:52

解决方案2
0 2014-05-30 05:53:32

解决方案3
0 2014-05-30 05:59:43

解决方案4
0 2016-06-03 07:17:00

为什么不关闭可解除警报？

问题描述

4 个解决方案

解决方案1 4 已采纳 2014-05-30 17:36:52

解决方案2 0 2014-05-30 05:53:32

解决方案3 0 2014-05-30 05:59:43

解决方案4 0 2016-06-03 07:17:00

解决方案1
4 已采纳 2014-05-30 17:36:52

解决方案2
0 2014-05-30 05:53:32

解决方案3
0 2014-05-30 05:59:43

解决方案4
0 2016-06-03 07:17:00