为什么在 ngClick 之后不为 ui-bootstrap 的警报指令解除超时工作? [英] Why doesn't dismiss-on-timeout work for ui-bootstrap's alert directive after an ngClick?
问题描述
它可以正常工作，但在 ngClick 后不起作用.
- 这是为什么?
- 如果您确实希望它在 ngClick 之后工作，应该如何处理?
它实际上适用于下面的代码段，但不适用于这个 Plunker，并且在我的应用中也不起作用.
在这三个地方中的任何一个地方它也从来没有超过一次，我不知道为什么会这样.
angular.module('app', ['ui.bootstrap']).controller('MainController', MainController);函数主控制器(){var vm = 这个；vm.updateSuccess = false;vm.closeUpdateSuccess = function() {console.log('closeUpdateSuccess');vm.updateSuccess = false;};vm.submit = 函数(){vm.updateSuccess = true;};}<头><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 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><身体><div ng-controller='MainController as vm'><alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()'dismiss-on-timeout='2000'>成功更新！</警报><h1>测试文本</h1><button ng-click='vm.submit()'>提交</button></html>
问题是您没有正确使用 alert 指令.它按设计工作，您可以通过查看浏览器中的控制台来看到这一点.当页面呈现时，两秒钟后你的日志语句被执行.alert 指令不知道也不关心它是否可见.Angular 将在将指令添加到 DOM 时执行该指令.对于您正在使用的 ng-show，它只会添加一次.您可以使用 ng-if 来实现所需的行为，或者，正如我在下面所说，如果您希望能够显示多个警报，则使用 ng-repeat.
在此处查看我们的示例，看看我们如何使用数组存储它们和 HTML 代码以通过 ng-repeat 显示它们.
It works normally, but doesn't work after an 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>
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.
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 的警报指令解除超时工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
