将光标更改为等待 angular $apply 为运行

Question

我的页面很复杂，有很多嵌套的 ng-repeat。 $apply 函数可能需要几秒钟。在此期间，浏览器挂起，用户无法执行任何操作。

出于礼貌，我想在 $apply 为运行时将鼠标指针更改为沙漏。我该怎么做？

Answer 1

诀窍是更改光标（使用 addClass），然后调用带有超时的慢速代码，在结束时将光标更改回正常状态。

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

使用与 AngularJS 摘要循环集成的 $timeout 服务：

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

DEMO on JSFiddle

将光标更改为等待 angular $apply 为运行

Change cursor to wait while the angular $apply is running

performance

mouse-cursor

angularjs

将光标更改为等待 angular $apply 为 运行

Change cursor to wait while the angular $apply is running

performance

mouse-cursor

angularjs

将光标更改为等待 angular $apply 为运行