Javascript 淡出不'；不再允许出现错误警报_Javascript_Jquery

Javascript 淡出不'；不再允许出现错误警报

javascript jquery

Javascript 淡出不'；不再允许出现错误警报,javascript,jquery,Javascript,Jquery,我使用以下HTML代码： <div style="width:235px; " id="ErrorAlert" ng-hide="ErrorAlert"> <alert type="danger">User's email is duplicated!</alert> </div> 问题是，经过一段时间，警报消失后，如果我再次调用警报，它不会出现。可能是因为设置了超时，但它已经过期了即使前一个事件已经超时，我如何使警报重新出现。您的错

我使用以下HTML代码：

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

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

即使前一个事件已经超时，我如何使警报重新出现。

您的错误是将使用类（

class=“ng hide”

）隐藏元素，而

jQuery.fadeOut（）

将编写一个带有

显示：无的内联样式属性
您的浏览器将始终优先考虑内联样式，因此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'）。删除ttr（'styles'）
。。。因为你的对象可能不会隐藏，因为他有display:block内联和ng隐藏
要隐藏的类…：D
我可以使用以下方法使其重新切换：
<body ng-controller="MainCtrl" ng-click="">
  <p>Hello {{name}}! <button type='button' id='ShowAlert'>Show Alert</button></p>
  <div style="width: 235px;" id="ErrorAlert" ng-show="ErrorAlert">
    <alert type="danger">User's email is duplicated!</alert>
  </div>
</body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.ErrorAlert = false;

  $('#ShowAlert').on('click', function(){
    $scope.ErrorAlert = true;

    setTimeout(function(){
      $scope.$apply(function(){
        $scope.ErrorAlert = false;
      });
    }, 2500);
  });

});

超时与此无关，只是表面上显示警报的内容没有重新显示（ngShow
可能？）。调用是否应该是.addClass（'ng-hide'）
和.removeClass（'ng-hide'）
？我认为做同样事情的分层类和内联样式是非最优的。ng-hide完全由Angular管理，所以ng-hide只基于您的模型（这里ErrorAlert
variable），但jQuery覆盖了所有内容，不查看Angular内容。。。基本上，您使用两种不同的方式来隐藏元素，但它们存在冲突。请记住，我不是OP。我也不太了解Angular，所以我的重点不是使用jQuery来显示/隐藏，而是尝试使用Angular的ng-处理器。@sebastienbarbier在哪里以及如何使用.show（）你能帮我安排一下答案吗？我更新了我的答案，你能试试吗？这里的问题是使用jQuery淡出。。。一些CSS转换更合适，可能是ng animate可以帮助但从未使用过它…：(
<body ng-controller="MainCtrl" ng-click="">
  <p>Hello {{name}}! <button type='button' id='ShowAlert'>Show Alert</button></p>
  <div style="width: 235px;" id="ErrorAlert" ng-show="ErrorAlert">
    <alert type="danger">User's email is duplicated!</alert>
  </div>
</body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.ErrorAlert = false;

  $('#ShowAlert').on('click', function(){
    $scope.ErrorAlert = true;

    setTimeout(function(){
      $scope.$apply(function(){
        $scope.ErrorAlert = false;
      });
    }, 2500);
  });

});

<body ng-controller="MainCtrl" ng-click="">
  <p>
    Hello {{name}}! 
    <button type='button' id='ShowAlert' ng-click="ErrorAlert = !ErrorAlert">Show Alert</button>
  </p>
  <div style="width: 235px;" id="ErrorAlert" ng-show="ErrorAlert">
    <alert type="danger">User's email is duplicated!</alert>
    <button type='X' ng-click="ErrorAlert = false">Close</button>
  </div>
</body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.ErrorAlert = false;

  $('#ShowAlert').on('click', function(){
    setTimeout(function(){
      $scope.$apply(function(){
        $scope.ErrorAlert = false;
      });
    }, 2500);
  });

});