angular ng-if หรือ ng-show ตอบสนองช้า (ล่าช้า 2 วินาที?)

ฉันกำลังพยายามแสดงหรือซ่อนตัวบ่งชี้การโหลดบนปุ่มเมื่อคำขอไม่ว่าง ฉันทำเช่นนั้นด้วยเชิงมุมโดยการเปลี่ยนตัวแปร $ scope.loading เมื่อคำขอกำลังโหลดหรือเมื่อโหลดเสร็จ

 $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 วินาทีในขณะที่ตัวแปร $ ขอบเขตจะได้รับการอัปเดตทันที ฉันลองใช้ $ ขอบเขต $ ใช้ แต่ดูเหมือนว่าจะไม่มีอะไรผิดปกติที่นี่ขอบเขตได้รับการอัปเดตอย่างดีและทันทีหลังจากการร้องขอ เป็นเพียงไอคอนที่ไม่ตอบสนองเร็วพอ

ขอบคุณที่ช่วยให้ฉันเข้าใจเรื่องนี้!

ลองลบngAnimateถ้าคุณไม่ได้ใช้มันจากหน้า config และ index.html ของแอพของคุณ:

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

@ สป็อค; หากคุณยังต้องการใช้ ngAnimate ให้ปล่อยการกำหนดค่าแอปของคุณไว้โดยไม่ถูกแตะต้องและเพิ่ม CSS ต่อไปนี้:

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

ซึ่งจะซ่อนไอคอนเคลื่อนไหวหลังจากตรงตามเงื่อนไขของคุณ

อย่างที่คุณเห็นเรากำลังตั้งค่า .ng-hide-animate เป็น hidden นี่คือสาเหตุของความล่าช้าในขณะที่รอให้ภาพเคลื่อนไหวเสร็จสมบูรณ์ คุณสามารถเพิ่มแอนิเมชั่นให้กับเหตุการณ์ซ่อนของคุณได้ตามที่ชื่อคลาสบอกเป็นนัยแทนที่จะซ่อนไว้ดังตัวอย่างด้านบน

ฉันมีปัญหาเดียวกันและแก้ไขปัญหานี้โดยใช้ ng-class ที่มีชื่อคลาส 'hidden' เพื่อซ่อนองค์ประกอบแทนที่จะใช้ ng-if หรือ ng-show / ng-hide

ฉันพบวิธีแก้ปัญหาบางอย่างที่นี่แต่สิ่งที่ดีที่สุดสำหรับฉันคือการลบล้างสไตล์สำหรับคลาส .ng-animate:

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

ฉันหวังว่าจะช่วยคุณ

ฉันประสบปัญหาที่คล้ายกันฉันเคย$scope.$evalAsync()บังคับให้อัปเดตการเชื่อมโยง

มันใช้งานได้เหมือนมีเสน่ห์

หลีกเลี่ยงการใช้$scope.$applyเนื่องจากอาจขัดแย้งกับขั้นตอน $ แยกย่อยที่ทำงานอยู่แล้ว

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

ฉันมีปัญหาเดียวกันเมื่อใช้

<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ใน CSS ของคุณสำหรับคลาส DIV ที่มีอยู่คุณสมบัติการแสดงผลนั้นอาจมีความสำคัญเหนือกว่าdisplay: hidden. การแก้ไขที่ง่ายสามารถใช้display: none !importantแทนได้ แต่มักจะมีวิธีแก้ปัญหาที่ดีกว่าเพื่อให้แน่ใจว่ามีความสำคัญเหนือกว่าด้วยวิธีอื่น ๆ นี่คือการอ่านเกี่ยวกับทางเลือกที่ดี

ในเวอร์ชันเชิงมุม 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();
            }


        }