কৌনিক এনজি-ইফ বা এনজি-শো ধীর সাড়া দেয় (2 সেকেন্ড বিলম্ব?)

Question 1

একটি অনুরোধ ব্যস্ত থাকাকালীন আমি একটি বোতামে লোডিং সূচকটি দেখানোর বা লুকানোর চেষ্টা করছি trying আমি অনুরোধটি লোড হচ্ছে বা যখন এটি লোড হয়ে যায় তখন $ স্কোপ. লোডিং ভেরিয়েবল পরিবর্তন করে কৌণিক দিয়ে এটি করি।

 $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 সেকেন্ডের জন্য দেখানো হয়, যখন $ স্কোপ ভেরিয়েবলটি তত্ক্ষণাত আপডেট হয়। আমি $ সুযোগ।। প্রয়োগ করার চেষ্টা করেছি তবে এখানে কী সমস্যা হয়েছে তা মনে হচ্ছে না, সুযোগটি ঠিকঠাক এবং অনুরোধের সাথে সাথেই আপডেট করা হয়েছে। এটি কেবলমাত্র এমন আইকন যা দ্রুত পর্যাপ্ত সাড়া দেয় না।

আমাকে এটি বুঝতে সাহায্য করার জন্য ধন্যবাদ!

Question 2

আপনি যদি আপনার অ্যাপ্লিকেশন কনফিগারেশন এবং সূচিপত্র HTML পৃষ্ঠা থেকে এটি ব্যবহার না করে থাকেন তবে এনজিএমিট সরানোর চেষ্টা করুন :

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

@ স্পোক; আপনার যদি এখনও এনজিএমিট ব্যবহারের প্রয়োজন হয় তবে আপনার অ্যাপ্লিকেশন কনফিগারেশনটি অদৃশ্য রাখুন এবং কেবলমাত্র নিম্নলিখিত সিএসএস যুক্ত করুন:

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

এটি আপনার শর্ত পূরণ হওয়ার পরে সরাসরি অ্যানিমেটেড আইকনটি আড়াল করবে।

আপনি দেখতে পাচ্ছেন আমরা গোপনে .ng-hide- অ্যানিমেট সেট করছি। এটি অ্যানিমেশনটি সম্পূর্ণ হওয়ার অপেক্ষায় বিলম্বের কারণ হয়। উপরের উদাহরণের মতো ক্লাসের নামটি লুকানোর পরিবর্তে ক্লাসের নামটি বোঝানো হওয়ায় আপনি আপনার লুকানোর ইভেন্টে একটি অ্যানিমেশন যুক্ত করতে পারেন।

Question 3

আমারও একই সমস্যা ছিল এবং এনজি-ইফ বা এনজি-শো / এনজি-লুকানোর পরিবর্তে উপাদানটি আড়াল করতে 'লুকানো' শ্রেণির নামের সাথে এনজি-ক্লাস ব্যবহার করে এটি কাজ করেছিলাম।

Question 4

আমি কিছু সমাধান পাওয়া এখানে , কিন্তু আমার জন্য শ্রেষ্ঠ .ng-সজীব বর্গ জন্য স্টাইলিং অগ্রাহ্য ছিল:

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

এইচটিএমএলে:

<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/

আমি আপনাকে সাহায্য আশা করি।

Question 5

আমি একই ধরণের সমস্যার মুখোমুখি হয়েছি, আমি ব্যবহার করেছি $scope.$evalAsync() বাধ্যতামূলকভাবে বাধ্যতামূলক আপডেটটি বাধ্য ।

ইহা যাদুর মত কাজ করে।

$scope.$applyইতিমধ্যে চলমান $ ডাইজেস্ট পর্বের সাথে দ্বন্দ্ব তৈরি করতে পারে বলে এটি ব্যবহার করা এড়িয়ে চলুন ।

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

Question 6

ব্যবহার করার সময় আমার একই সমস্যা ছিল

<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: flexডিআইভির বিদ্যমান বর্গের জন্য আপনার সিএসএসে থাকে তবে সেই প্রদর্শন বৈশিষ্ট্যের চেয়ে বেশি হতে পারে display: hidden। পরিবর্তে একটি সহজ ফিক্স ব্যবহার display: none !importantকরা যেতে পারে , তবে অন্যান্য উপায়ে অগ্রাধিকার নিশ্চিত করার জন্য প্রায়শই আরও ভাল সমাধান রয়েছে। এখানে বিকল্প সম্পর্কে ভাল পড়া ।

Question 7

কৌনিক সংস্করণে 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();
            }


        }