警报中的关闭按钮未显示
[英]Close Button in Alert not showing
问题描述
I have the following: 
我有以下内容：
Markup: 标记：
angular.module('web').controller('AppController', function($scope) { $scope.alerts = []; $scope.alerts.push({ type: 'danger', msg: 'I am an error' }); $scope.alerts.push({ type: 'danger', msg: 'I am an error' }); });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script> <html> <body ng-app="web"> <div ng-controller="AppController"> <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert> </div> </body> </html>
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
Controller: 控制器：
$scope.closeAlert = function (index) {
$scope.alerts.splice(index, 1);
};
function addError(error) {
$scope.alerts.push({ type: 'danger', msg: error.data });
}
But the Close button is not showed: 但是没有显示“关闭”按钮：
Can Anyone help me show the close button? 有人可以帮我显示关闭按钮吗？
I'm creating the scafolding of the project with Grunt and bower. 我正在用Grunt和bower创建项目的脚手架。
4 个解决方案
解决方案1
2 2015-03-18 12:31:28
While maybe not the solution to your problem, I found, that using ng-bind along with a dismissable alert removes the close button, too (since ng-bind controls the entire content of the element). 我发现虽然可能无法解决您的问题，但同时使用ng-bind和可禁用的警报也会删除关闭按钮（因为ng-bind控制了元素的全部内容）。
So you should always use the {{ alert.message }} notation to display the alert content. 因此，您应始终使用{{ alert.message }}标记来显示警报内容。
解决方案2
2 2015-10-28 13:28:29
If you want to avoid using {{alert.msg}} (that can be ugly sometimes) you can use: 如果您想避免使用{{alert.msg}} （有时可能很难看），则可以使用：
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
<div ng-bind="alert.msg"></div>
</alert>
解决方案3
0 已采纳 2014-11-19 14:45:08
After some research I found that when you have multiple times defined the 'alert' array and the close attribute the 'X' dissapear. 经过一些研究，我发现当您多次定义'alert'数组和close属性时，'X'消失。
I presume that this could happen because the boolean that define if it should be showed is changed after seeing multiple times the variable, is toggled. 我认为可能会发生这种情况，因为定义了是否应显示的布尔值在多次查看变量后被更改了。
Thanks for your help :) 谢谢你的帮助 ：）
I hope this help anyone. 希望对任何人有帮助。
解决方案4
0 2017-02-16 03:05:44
I had the same problem. 我有同样的问题。 My solution was to use ng-click in the 'X' with a closeAlert function. 我的解决方案是在ng-click中使用带有closeAlert函数的X。 I add a ng-repeat to the alert arrays based on ui-bootstrap . 我基于ui-bootstrap将ng-repeat添加到警报阵列。 You can check it out here. 您可以在这里查看。
http://plnkr.co/edit/hcVlFZ2yZzLHaUahXaJK http://plnkr.co/edit/hcVlFZ2yZzLHaUahXaJK
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.