FadeOut不再允许出现错误警报

Question

我使用以下HTML代码：

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)

import os
import sys
from oscar import get_core_apps
from oscar import OSCAR_MAIN_TEMPLATE_DIR
from oscar.defaults import *
from django.core.urlresolvers import reverse_lazy

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
location = lambda x: os.path.join(os.path.dirname(os.path.realpath(__file__)), '..', x)

# sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))  # to store apps in apps/ directory


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.7/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = ''

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []


# Application definition
TEMPLATE_LOADERS = (
    'django.template.loaders.filesystem.Loader',
    'django.template.loaders.app_directories.Loader',
    'django.template.loaders.eggs.Loader',
)

TEMPLATE_DIRS = (
    location('templates'),
    os.path.join(BASE_DIR, 'templates').replace('\\', '/'),
    OSCAR_MAIN_TEMPLATE_DIR,
)

INSTALLED_APPS = [
    'django.contrib.auth',
    'django.contrib.admin',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.flatpages',
    'apps.users',
    'apps.doorstep',
    'apps.cars',
    'django_markdown',
    'social.apps.django_app.default',
    # 'crispy_forms',
    'django.contrib.sites',
    # 'zinnia_threaded_comments',   # app for zinnia threaded comments
    'django_comments',  # zinnia-blogging prerequisite
    'mptt',             # zinnia-blogging prerequisite
    'tagging',          # zinnia-blogging prerequisite
    'zinnia',           # zinnia itself
    'compressor',
    ] + get_core_apps()
# specifying the comments app
# COMMENTS_APP = 'zinnia_threaded_comments'

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'oscar.apps.basket.middleware.BasketMiddleware',
    'django.contrib.flatpages.middleware.FlatpageFallbackMiddleware',
)

# Authentication backend used by python-social-auth
AUTHENTICATION_BACKENDS = (
    'social.backends.facebook.FacebookOAuth2',
    'social.backends.google.GoogleOAuth2',
    'django.contrib.auth.backends.ModelBackend',
    'oscar.apps.customer.auth_backends.EmailBackend',
)

TEMPLATE_CONTEXT_PROCESSORS = (
    "social.apps.django_app.context_processors.backends",
    "social.apps.django_app.context_processors.login_redirect",
    "django.contrib.auth.context_processors.auth",
    "django.contrib.messages.context_processors.messages",
    "django.core.context_processors.i18n",
    "django.core.context_processors.request",
    "zinnia.context_processors.version",
    "django.core.context_processors.debug",
    "django.core.context_processors.media",
    "django.core.context_processors.static",
    "django.core.context_processors.tz",
    'oscar.apps.search.context_processors.search_form',
    'oscar.apps.promotions.context_processors.promotions',
    'oscar.apps.checkout.context_processors.checkout',
    'oscar.apps.customer.notifications.context_processors.notifications',
    'oscar.core.context_processors.metadata'
)



ROOT_URLCONF = '{project_name}.urls'

WSGI_APPLICATION = '{project_name}.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.7/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': "",
        'USER': '',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

# Internationalization

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

LOGIN_URL = '/users/login/'

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.7/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '/static/')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = "/media/"



STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'staticfiles'),


)
REGISTRATION_INVALID = 50
MESSAGE_TAGS = {
    REGISTRATION_INVALID: 'InvalidDetails',
}
# temporary , should not be in settings file
SOCIAL_AUTH_FACEBOOK_KEY = ""
SOCIAL_AUTH_FACEBOOK_SECRET = ""
SOCIAL_AUTH_FACEBOOK_SCOPE = ['email']

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = ""
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = ""

LOGIN_REDIRECT_URL = '/blog/'

# ------------------------------------ #
# Settings for sending email #

EMAIL_USE_TLS = True
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_HOST_USER = ''
EMAIL_HOST_PASSWORD = ''
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER
SERVER_EMAIL = EMAIL_HOST_USER
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
# ------------------------------------ #


# site id for django sites framework
SITE_ID = 1

# configuration settings for  django-zinnia
ZINNIA_PING_EXTERNAL_URLS = False
ZINNIA_SAVE_PING_DIRECTORIES = False
ZINNIA_MARKUP_LANGUAGE = 'markdown'
ZINNIA_UPLOAD_TO = 'uploads/zinnia/'
# TimeZone Settings
USE_TZ = True

# ------------------------ #
# django oscar search settings
HAYSTACK_CONNECTIONS = {
    'default': {
        'ENGINE': 'haystack.backends.simple_backend.SimpleEngine',
    },
}
# django oscar settings
OSCAR_SHOP_NAME = ''
OSCAR_DEFAULT_CURRENCY = 'INR'

JS设置警报超时是，

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

问题是经过一段时间后警报消失，如果再次呼叫警报，则不会出现。也许是因为超时已经设定且已经过期。

即使上一次事件已经超时，我怎样才能重新出现警报。

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

Answer 2

我能够使用它来重新切换：

<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来触发更改。

这里我假设是一种Angular-y方式做一个解雇按钮：

<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