Question

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

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

它实际上可以在下面的代码段中使用，但在Plunker中无效，并且在我的应用中也无效。

在这三个地方的任何一个地方，它也不会超过一次，我也不知道为什么会这样。

＆＃13;

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

＆＃13;

<!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;

Answer 1

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

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

Answer 2

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

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

2 个答案: