ng-if hoặc ng-show phản hồi chậm (độ trễ 2 giây?)

Tôi đang cố gắng hiển thị hoặc ẩn chỉ báo đang tải trên một nút khi một yêu cầu bận. Tôi làm điều đó với angle bằng cách thay đổi biến $ scope.loading khi một yêu cầu đang tải hoặc khi tải xong.

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

        })
        .error(function(error){

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

Trong giao diện người dùng:

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

Điều này hoạt động tốt, nhưng biểu tượng tải (làm mới ion) được hiển thị trong khoảng 2 giây, trong khi biến $ scope được cập nhật ngay lập tức. Tôi đã thử $ scope. $ Apply nhưng có vẻ không có gì sai ở đây, scope được cập nhật rất tốt và ngay sau khi có yêu cầu. Đó chỉ là biểu tượng không phản hồi đủ nhanh.

Cảm ơn đã giúp tôi hiểu điều này!

Thử xóa ngAnimate nếu bạn không sử dụng nó khỏi cấu hình ứng dụng và trang index.html:

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

@Spock; nếu bạn vẫn yêu cầu sử dụng ngAnimate, hãy để nguyên cấu hình ứng dụng của bạn và chỉ cần thêm CSS sau:

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

Điều đó sẽ ẩn biểu tượng động ngay sau khi điều kiện của bạn được đáp ứng.

Như bạn có thể thấy, chúng tôi đang đặt .ng-hide-animate thành ẩn. Đây là nguyên nhân gây ra sự chậm trễ khi chờ hoạt ảnh hoàn tất. Bạn có thể thêm hoạt ảnh vào sự kiện ẩn của mình như tên lớp của nó thay vì ẩn nó như trong ví dụ trên.

Tôi đã gặp vấn đề tương tự và đã khắc phục nó bằng cách sử dụng ng-class với tên lớp 'hidden' để ẩn phần tử thay vì sử dụng ng-if hoặc ng-show / ng-hide.

Tôi đã tìm thấy một số giải pháp ở đây , nhưng tốt nhất đối với tôi là ghi đè kiểu cho lớp .ng-animate:

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

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

Đây là một ví dụ: http://jsfiddle.net/9krLr/27/

Tôi hy vọng sẽ giúp bạn.

Tôi đang gặp phải vấn đề tương tự, tôi đã từng $scope.$evalAsync()buộc cập nhật ràng buộc.

Nó hoạt động như một say mê.

Tránh sử dụng $scope.$applyvì nó có thể xung đột với giai đoạn thông báo $ đã chạy.

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

Tôi đã gặp vấn đề tương tự khi sử dụng

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

Trong trường hợp của tôi, tôi đã giải quyết nó bằng cách thêm một lớp:

.hidden {
  display: none;
}

và sau đó thêm lớp có điều kiện thay vì sử dụng *ngIf:

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

Nếu luôn sử dụng nó theo cách này, tôi sẽ xem xét đổi tên shouldShowthành shouldHide(và phủ định logic gán nó), vì vậy nó có thể được sử dụng shouldHidethay thế !shouldShow.

Nếu bạn có display: flextrong CSS của mình cho lớp hiện có của DIV, thuộc tính hiển thị đó có thể được ưu tiên hơn display: hidden. Có thể sử dụng một cách sửa chữa dễ dàng để display: none !importantthay thế, nhưng thường có những giải pháp tốt hơn để đảm bảo quyền ưu tiên theo những cách khác. Đây là một bài đọc tốt về các lựa chọn thay thế .

trong phiên bản góc 1.5.x thêm $scope.$apply()sau khi thay đổi điều kiện đã thực hiện công việc đối với tôi đây là một hàm ví dụ

$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();
            }


        }