为什么在ngClick之后对ui-bootstrap的alert指令不启用超时功能? [英] Why doesn't dismiss-on-timeout work for ui-bootstrap's alert directive after an ngClick?
问题描述
它可以正常工作，但是在ngClick之后不起作用.
It works normally, but doesn't work after an ngClick.
- 这是为什么?
- 如果您希望在ngClick之后工作，应该如何处理?
- Why is this?
- How should this be dealt with if you do want it to work after an ngClick?
它实际上在下面的代码段中有效，但在此柱塞中不起作用，并且在我的应用中也不起作用.
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
在三个地方中的任何一个地方它也永远不会超过一次，我也不知道为什么.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap@0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
推荐答案
问题是您没有正确使用alert指令.它正在按设计工作，您可以通过查看浏览器中的控制台来查看.呈现页面后，两秒钟后将执行您的日志记录语句. alert指令不知道或不在乎它是否可见.将指令添加到DOM时，Angular将执行该指令.对于正在使用的ng-show，它只会被添加一次.您可以使用ng-if来实现所需的行为，或者，如下所述，如果要显示多个警报，可以使用ng-repeat.
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
在我们的示例中此处，看看我们如何使用数组存储它们，以及HTML代码通过ng-repeat显示它们.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
这篇关于为什么在ngClick之后对ui-bootstrap的alert指令不启用超时功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
