javascript - FadeOut 不再允许出现错误警报

Question

我使用以下 HTML 代码:

<div style="width:235px; " id="ErrorAlert" ng-hide="ErrorAlert">
     <alert type="danger">User's email is duplicated!</alert>
</div>

设置警报超时的JS是，

 $scope.ErrorAlert = false;
 setTimeout(function () {
      $('#ErrorAlert').fadeOut('slow');
 }, 2000);   //2 second

问题是时间过去后警报消失，如果我再次调用警报，它不会出现。可能是因为设置了超时并且它已经过期了。

即使上一个事件的超时时间已经过去，我怎样才能使警报重新出现。

Answer 1

你的错误是ng-hide将使用一个类 (class="ng-hide") 来隐藏您的元素，而 jQuery.fadeOut() 将使用 display: none 编写一个内联样式属性。

您的浏览器将始终优先考虑内联样式，因此 Angular 将删除此类，但由于内联样式，对象将保持隐藏状态。

当你设置 $scope.ErrorAlert = true; 时也使用 jQuery 来移除内联样式或调用 .show() 方法。

一个解决方案:

$scope.ErrorAlert = false;
 setTimeout(function () {
      $('#ErrorAlert').fadeOut('slow', function () {
          $scope.ErrorAlert = true;
          // $('#ErrorAlert').show();
          $('#ErrorAlert').removeAttr('styles');
      });
 }, 2000);   //2 second

可以代替 $('#ErrorAlert').show(); 尝试使用 $('#ErrorAlert').removeAttr('styles') 。 .. 因为你的对象可能不会隐藏，因为他有 display: block; 内联和要隐藏的 ng-hide 类 ...:D