Сменить курсор, чтобы подождать, пока выполняется угловая $ apply

Question

У меня сложная страница с большим количеством вложенных ng-repeat. Функция $ apply может занять несколько секунд. За это время браузер висит, и пользователь ничего не может сделать.

Как любезность, я хотел бы изменить указатель мыши на песочные часы, пока работает $ apply. Как я могу это сделать?

Answer 1

Фокус в том, чтобы сменить курсор (с помощью addClass), а затем вызвать медленный код с таймаутом, в конце которого вы вернете курсор в нормальное состояние.

JSFiddle

var mybody = angular.element(document).find('body'); 
    mybody.addClass('waiting'); // set cursor to hourglass 
    setTimeout(function() { 
     doSlowStuff(); 
     $scope.$apply(); 
     mybody.removeClass('waiting'); // set cursor to normal 
    }, 0); 

Вы должны сделать медленный материал в тайм-аут, так что addClass будет применяться до начала медленный материал.

CSS-всего

.waiting { cursor: wait; } 

Answer 2

Используйте ng-class директивы для установки классов и ng-disabled отключить кнопки:

<div ng-app="myApp" ng-controller="MyCtrl" 
    ng-class="{waiting: status=='running'}"> 
    Hello, {{name}}! 
    <button ng-click="more();" ng-disabled="status=='running'"> 
    CLICK HERE 
    </button> {{status}} 

Используйте кнопки $timeout сервис, который интегрирован с AngularJS переваривать цикл:

$scope.more = function() { 
    //var mybody = angular.element(document).find('body'); 
    //mybody.addClass('waiting'); 
    $scope.status = 'running'; 
    //setTimeout(function() { 
    $timeout(function() { 
     doSlowStuff(); 
     $scope.status = 'done'; 
     //$scope.$apply(); 
     //mybody.removeClass('waiting'); 
    }, 1000); 
}; 

T он DEMO on JSFiddle