为什么在ngClick之后没有解除ui-bootstrap警报指令的超时工作?

时间:2015-10-07 02:25:21

标签: angularjs angular-ui-bootstrap

它正常工作,但在点击后无法正常工作。

  1. 这是为什么?
  2. 如果 希望它在ngClick之后工作,应如何处理?
  3. 它实际上可以在下面的代码段中使用,但在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;
    &#13;
    &#13;

2 个答案:

答案 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;
};