为什么 ngClick 后 ui-bootstrap 的警报指令的超时关闭不起作用？

Question

可以正常使用，但是点击之后就不行了。

这是为什么？
如果您希望它在 ngClick 后工作，应该如何处理？

它实际上在下面的代码片段中有效，但在这个 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>

Answer 1

您正在使用 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;
};

Answer 2

问题是您没有正确使用 alert 指令。它按设计工作，您可以通过查看浏览器中的控制台来了解这一点。呈现页面时，两秒钟后执行您的日志语句。 alert 指令不知道也不关心它是否可见。 Angular 将在添加到 DOM 时执行该指令。对于您正在使用的 ng-show，它只会添加一次。您可以使用 ng-if 来实现所需的行为，或者如我在下面所说，如果您希望能够显示多个警报，则可以使用 ng-repeat。

查看我们的示例 here，了解我们如何使用数组来存储它们以及如何使用 HTML 代码通过 ng-repeat 显示它们。

为什么 ngClick 后 ui-bootstrap 的警报指令的超时关闭不起作用？

Why doesn't dismiss-on-timeout work for ui-bootstrap's alert directive after an ngClick?

angularjs

angular-ui-bootstrap