淡出不再允许出现错误警报

我使用以下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

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

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

您的错误是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

我能够使用以下命令重新切换：

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

http://plnkr.co/edit/qEUTmgfYUhQYMEdRAG3z?p=preview

因此，使用$scope.ErrorAlert来切换视图，但要确保并通过告诉Angular发生了更改来触发$scope.ErrorAlert中的更改。

我认为这是一种安格拉式的解雇按钮：

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

http://plnkr.co/edit/OEdr2OWPV11hVnYSVRMc?p=preview

相关内容

最新更新

热门标签：