angularjs - 为什么在 ngClick 之后,missing-on-timeout 不适用于 ui-bootstrap 的警报指令?

标签 angularjs angular-ui-bootstrap

它可以正常工作,但在 ngClick 后不起作用。

  1. 这是为什么?
  2. 如果您确实希望它在 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaaf7b9a9a99ae9f4ebf4eb" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcddd2dbc9d0ddce92d6cffc8d9288928f" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cdd195dad7d7cccbcccad9c8f88896898b968b" rel="noreferrer noopener nofollow">[email protected]</a>" 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。

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

关于angularjs - 为什么在 ngClick 之后,missing-on-timeout 不适用于 ui-bootstrap 的警报指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32982806/

相关文章:

javascript - $http 未定义索引。

javascript - 如何使用 Factory 在 mouseleave 上关闭 Angular-ui-bootstrap uibModal?

angularjs - 访问由于 Angular ui 选项卡隔离/继承范围而隐藏的表单 Controller

javascript - 如何将标题设置为 <span>/<div> 标签,以便它应该读取数据中的 <br/> 标签并在单独的行中显示工具提示?

javascript - 读取html表绑定(bind)中ng-repeat内隐藏字段的值

angularjs - 从 Azure Blob for Express.js 服务器提供 HTML 文件

c# - Azure Blob 存储 - 从 WebApi Controller 将 Http/StreamContent 上传到 CloudBlockBlob

angularjs - 当我离开时触发选项卡选择事件

angularjs - Angular Modal Service 不会使背景变灰

javascript - 我的指令停止与另一个指令结合使用.. Angular.js