कोणीय एनजी-अगर या एनजी-शो धीमी गति से प्रतिक्रिया करता है (2 सेकंड से देरी?)

Question

मैं एक अनुरोध पर व्यस्त होने पर एक बटन पर लोडिंग संकेतक दिखाने या छिपाने की कोशिश कर रहा हूं। मैं एक अनुरोध लोड हो रहा है या जब यह लोड हो रहा है जब $ गुंजाइश। लोडिंग चर को बदलकर कोणीय के साथ करता है।

 $scope.login = function(){
     $scope.loading = true;
    apiFactory.getToken()
        .success(function(data){

        })
        .error(function(error){

        })
         .finally(function(){
               $timeout(function() {
                 $scope.loading = false;
               }, 0);
         });
 };

सीमा में:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in 
<span ng-if="loading" class="ion-refreshing"></span>
</button>

यह ठीक काम करता है, लेकिन लोडिंग आइकन (आयन-रिफ्रेशिंग) को लगभग 2 सेकंड के लिए दिखाया जाता है, जबकि $ गुंजाइश चर तुरंत अपडेट किया जाता है। मैंने $ गुंजाइश की कोशिश की। $ लागू होते हैं, लेकिन यह प्रतीत नहीं होता है कि यहां क्या गलत है, अनुरोध के ठीक बाद और ठीक से गुंजाइश अपडेट की गई है। यह सिर्फ आइकन है जो जल्दी से पर्याप्त प्रतिक्रिया नहीं दे रहा है।

मुझे यह समझने में मदद करने के लिए धन्यवाद!

Comments

किसी भी एनिमेशन शामिल?

— tasseKATT

नकारात्मक। कोई एनिमेशन शामिल नहीं है। इसके बजाय एनजी-क्लास का उपयोग करने में मदद मिलती है।

— जोरे

मैं एक ही या एक समान मुद्दा रहा हूँ। दायरा तुरंत और सही ढंग से अपडेट किया गया है - मैंने यह सत्यापित करने के लिए कि संबंधित तत्वों को दिखाया जाना चाहिए का उपयोग करने वाले $scopeकार्यों से संदेशों को लॉग करके सत्यापित ng-ifकिया। हालाँकि, ng-ifकुछ सेकंड के लिए गलत या छिपे हुए बटन के साथ बटन दिखाई देते हैं। फिर थोड़ी देर के बाद सभी बटन अपने इच्छित दृश्य / छिपी हुई स्थिति को लेते हैं। - मैंने ng-hideइसके बजाय इसका उपयोग करके काम किया । कोणीय संस्करण 1.2.16।

— काजमग्नस

उन लोगों के लिए कोई समाधान जो किसी भी एनिमेशन का उपयोग नहीं कर रहे हैं?

— ज़िया उल रहमान मुग़ल

Answer 1

यदि आप इसे अपने एप्लिकेशन कॉन्फिग और इंडेक्स। Html पृष्ठ से उपयोग नहीं कर रहे हैं, तो उसे हटाने का प्रयास करें :

angular.module('myApp', [...'ngAnimate',...])

@Spock; यदि आपको अभी भी ngAnimate के उपयोग की आवश्यकता है, तो अपने एप्लिकेशन को अछूता छोड़ दें और बस निम्नलिखित सीएसएस जोड़ें:

.ng-hide.ng-hide-animate{
     display: none !important;
}

आपकी स्थिति पूरी होने के बाद सीधे एनिमेटेड आइकन छिपाएगा।

जैसा कि आप देख सकते हैं कि हम सेटिंग कर रहे हैं .ng-hide-aimate to hidden। यह वह देरी है जो एनीमेशन के पूरा होने का इंतजार करती है। आप अपने छिपाने की घटना के लिए एक एनीमेशन जोड़ सकते हैं क्योंकि ऊपर दिए गए उदाहरण में वर्ग नाम छिपाने के बजाय इसका नाम है।

Comments

मेरे पास केवल एक जोड़े के साथ एक सरल पृष्ठ था ng-if, ng-showजो कि स्पष्ट रूप से धीमा था। मैंने हटा दिया ngAnimateऔर इसने मेरे लिए समस्या तय कर दी। धन्यवाद!

— एमानो गान

इससे मुझे एक समस्या का समाधान हो गया था ... क्या आप जानते हैं कि अस्वाभाविक की उपस्थिति धीमी गति से संक्रमण का कारण बन रही थी?

— क्लार्क

एक ही समस्या थी - गैर-परिचित को हटाने से इसे हल किया गया .. लेकिन यह अच्छा नहीं है .. कई मॉड्यूल को शांत एनिमेशन करने के लिए गैर-सक्रिय होने की आवश्यकता है .. क्या करें? ngAnimattias तुम कहाँ हो? :)

— स्पॉक

के मामले में ng-if, सिर्फ .ng-leave { display:none; }तत्व को जोड़ने से मेरे लिए चाल चली ( !importantजरूरत नहीं थी)।

— जोआओ

Answer 2

मेरे पास एक ही मुद्दा था, और एनजी-आईएफ या एनजी-शो / एनजी-छिपाने के बजाय तत्व को छिपाने के लिए 'छिपे हुए' वर्ग के नाम के साथ एनजी-क्लास का उपयोग करके इसके चारों ओर काम किया।

Comments

एनिमेशन और / या घटना संचालकों से संबंधित लगता है। वास्तव में यह निश्चित नहीं है कि अन्य लोग धीमे क्यों हैं, लेकिन मैं जानना चाहता हूं

— थियागो फेस्टा

आप यह कैसे कर सकते हैं?

— jsmedmar 23

यह बहुत तेज है! ऐसा क्यों है??

— एरन

मुझे लगता है कि यह केवल इस तथ्य से कम है कि ngAnimate का उपयोग ng-if / ng-show का उपयोग करने वाले तत्वों के लिए प्रविष्टि / निकास एनीमेशन व्यवहार लागू करता है, जबकि यह ng-class अभिव्यक्तियों में परिवर्तन के लिए ऐसा नहीं करता है।

— जॉन रिक्स

@neimad यह कैसे किया जाता है? मेरे मामले में, मुझे एनजी का उपयोग करने की आवश्यकता है, अगर यह जांचने के लिए कि क्या संपत्ति का मूल्य है null(जो कि एपीआई कॉल की प्रतीक्षा कर रहे कुछ सेकंड के लिए है), इसलिए दो चुनिंदा तत्व संक्षेप में दिखाई दे रहे हैं। तो क्या आप बिल्कुल भी उपयोग नहीं कर रहे हैं ng-if ? धन्यवाद।

— क्रिस

Answer 3

मुझे यहां कुछ समाधान मिले , लेकिन मेरे लिए सबसे अच्छा था .ng-चेतन वर्ग के लिए स्टाइल को ओवरराइड करना:

.ng-animate.no-animate {
    transition: 0s none;
    -webkit-transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
}

Html में:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
    Log in 
    <span ng-if="loading" class="ion-refreshing no-animate"></span>
</button>

यह एक उदाहरण है: http://jsfiddle.net/9krLr/27/

मुझे आशा है कि आपकी मदद करेंगे।

Answer 4

मैं इसी तरह के मुद्दे का सामना कर रहा था, मैंने इस्तेमाल किया $scope.$evalAsync() बाध्यकारी अद्यतन को मजबूर करता था।

यह एक सम्मोहन की तरह काम करता है।

उपयोग करने से बचें $scope.$applyक्योंकि यह पहले से चल रहे $ पच चरण के साथ संघर्ष कर सकता है।

if(selectedStatistics.length === 0 || selectedWorkgroups.length === 0){
    ctrl.isSaveDisabled = true;
    $scope.$evalAsync();
} else{
    ctrl.isSaveDisabled = false;
    $scope.$evalAsync();
}

Comments

मेरे लिए काम किया। लेकिन क्या इसके कोई नुकसान हैं?

— सारा टामम

मैंने किसी का सामना नहीं किया है। Async ऑपरेशंस के मामले में यह बहुत आसान है।

— rach8garg

उपयोगी उत्तर के लिए धन्यवाद :)

— सारा तामम

यह जवाब एक जैकपॉट लगता है, धन्यवाद।

— अब्देइली चंदनवाला

वैसे यह विलंबित मुद्दा मुख्य रूप से स्थानीय वातावरण में और शायद ही कभी उत्पादन में हो रहा है - पता नहीं क्यों

— अब्देइली चंदनवाला

Answer 5

उपयोग करते समय मेरे पास एक ही मुद्दा था

<div *ngIf='shouldShow'>
    <!-- Rest of DIV content here -->
</div>

मेरे मामले में मैंने एक वर्ग जोड़कर इसे हल किया:

.hidden {
  display: none;
}

और फिर उपयोग करने के बजाय सशर्त रूप से वर्ग जोड़ना *ngIf:

<div [ngClass]="{'hidden': !shouldShow}">
    <!-- Rest of DIV content here -->
</div>

यदि हमेशा इसे इस तरह से उपयोग किया जाता है, तो मैं इसका नाम बदलने shouldShowपर विचार करूंगा shouldHide(और इसे लागू करने वाले तर्क को नकारना), इसलिए इसका उपयोग किया जा सकता हैshouldHide के बजाय !shouldShow।

यदि आपके पास display: flexDIV के मौजूदा वर्ग के लिए आपके सीएसएस में है, तो उस प्रदर्शन संपत्ति पर पूर्वता हो सकती है display: hidden। display: none !importantइसके बजाय एक आसान फिक्स का उपयोग किया जा सकता है , लेकिन अन्य तरीकों से पूर्वता सुनिश्चित करने के लिए अक्सर बेहतर समाधान होते हैं। यहाँ विकल्पों के बारे में एक अच्छा पढ़ा है ।

Answer 6

कोणीय संस्करण 1.5.x $scope.$apply()में स्थिति में बदलाव के बाद मेरे लिए काम करना यहाँ एक उदाहरण कार्य है

$scope.addSample = function(PDF)
        {
            var validTypes ="application/pdf";
            if(PDF.type == validTypes)
            {
                //checking if the type is Pdf and only pdf
                $scope.samplePDF= PDF.files[0];
                $scope.validError = false;
                $scope.$apply();
            }

            else
            {
                 $scope.validError = true;
                 $scope.samplePDF= null;
                 $scope.$apply();
            }


        }