它正常工作,但在点击后无法正常工作。
它实际上可以在下面的代码段中使用,但在Plunker中无效,并且在我的应用中也无效。
在这三个地方的任何一个地方,它也不会超过一次,我也不知道为什么会这样。
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>
&#13;
答案 0 :(得分:3)
问题是您没有正确使用alert
指令。它按设计工作,你可以通过在浏览器中查看控制台来看到这一点。呈现页面时,两秒钟后执行日志记录语句。 alert
指令不知道或不关心它是否可见。 Angular将在添加到DOM时执行该指令。对于您使用的ng-show
,它只会添加一次。您可以使用ng-if
来实现所需的行为,或者如下所述ng-repeat
,如果您希望能够显示多个警报。
查看我们的示例here,了解我们如何使用数组存储它们以及HTML代码以通过ng-repeat
显示它们。
答案 1 :(得分:0)
你正在使用angular-ui,但是你正在尝试执行本机javascript函数,尝试在js文件中使用angular.1。所以你需要实现它,以便指令可以调用它,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
并在控制器中:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};