FadeOut no longer allows error warnings to appear
I am using the following HTML code:
<div style="width:235px; " id="ErrorAlert" ng-hide="ErrorAlert">
<alert type="danger">User email is duplicated!</alert>
</div>
JS to set the warning timeout,
$scope.ErrorAlert = false;
setTimeout(function () {
$('#ErrorAlert').fadeOut('slow');
}, 2000); //2 second
The problem is that after the passage of time and the warning will disappear. If I call the warning again, it doesn't appear. Possibly because the timeout is set and has already expired.
How can I make the warning appear again even if the timeout has already passed the previous event.
source to share
Your mistake is that ng-hide will use class ( class="ng-hide"
) to hide your element, whereas it jQuery.fadeOut()
will write inline style with display: none
.
Your browser will always give priority to the inline style, so Angular will remove this class, but the object will remain hidden due to the inline style.
When you install $scope.ErrorAlert = true;
, also use jQuery to remove inline styles or call a method .show()
.
One solution:
$scope.ErrorAlert = false;
setTimeout(function () {
$('#ErrorAlert').fadeOut('slow', function () {
$scope.ErrorAlert = true;
// $('#ErrorAlert').show();
$('#ErrorAlert').removeAttr('styles');
});
}, 2000); //2 second
Maybe $('#ErrorAlert').show();
try using $('#ErrorAlert').removeAttr('styles')
... instead , because your object probably won't hide as it has a display: block;
built in and ng-hide
class to hide ...: D
source to share
I managed to get it to re-switch using this:
<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 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
So, use $scope.ErrorAlert
to switch the view, but make sure you activate the change in $scope.ErrorAlert
by telling Angular that it happened.
Here I am assuming the Angular -y way to make the terminate button:
<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 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);
});
});
source to share