摘要：由于網(wǎng)絡(luò)等各方面原因，有時(shí)執(zhí)行一個(gè)操作時(shí)有時(shí)需要等待比較長(zhǎng)的時(shí)間，如果不進(jìn)行特殊處理就無(wú)法知道當(dāng)前操作的狀態(tài)，嚴(yán)重影響用戶體驗(yàn)。為了解決上面的問(wèn)題，考慮利用的對(duì)執(zhí)行長(zhǎng)操作時(shí)需要進(jìn)行控制的元素進(jìn)行設(shè)置，實(shí)現(xiàn)以元素為單位進(jìn)行頁(yè)面狀態(tài)的控制。

由于網(wǎng)絡(luò)等各方面原因，有時(shí)執(zhí)行一個(gè)ajax操作時(shí)有時(shí)需要等待比較長(zhǎng)的時(shí)間，如果不進(jìn)行特殊處理就無(wú)法知道當(dāng)前操作的狀態(tài)，嚴(yán)重影響用戶體驗(yàn)。

比較常見(jiàn)的解決方案是執(zhí)行可能的長(zhǎng)操作前先打開(kāi)一個(gè)蒙版，覆蓋頁(yè)面，通過(guò)動(dòng)畫(huà)指示當(dāng)前頁(yè)面處于執(zhí)行狀態(tài)，獲得返回結(jié)果后在關(guān)閉蒙版。這種方式雖然可以很清晰的展現(xiàn)正在等待操作結(jié)果的狀態(tài)，但是對(duì)于網(wǎng)絡(luò)條件比較好，操作結(jié)果很快就返回的情況，會(huì)給用戶造成一種頁(yè)面閃爍的感覺(jué)，也會(huì)影響用戶體驗(yàn)。

為了解決上面的問(wèn)題，考慮利用angular的directive對(duì)執(zhí)行長(zhǎng)操作時(shí)需要進(jìn)行控制的元素進(jìn)行設(shè)置，實(shí)現(xiàn)以元素為單位進(jìn)行頁(yè)面狀態(tài)的控制。

需要進(jìn)行狀態(tài)控制的元素有幾類：1、input元素，執(zhí)行長(zhǎng)操作時(shí)它們應(yīng)該處于disabled狀態(tài)；2、button等發(fā)起操作的元素，它們應(yīng)該出于disabled的狀態(tài)，同時(shí)發(fā)起正在執(zhí)行的長(zhǎng)操作的元素應(yīng)該出于running的狀態(tài)，例如：通過(guò)動(dòng)畫(huà)。

實(shí)現(xiàn)思路如下：
1、定義directive，tms-lock

app = angular.module("app", []);
app.directive("tmsLock", function() {
    return {
        restrict: "A",
        scope: {
            lock: "=tmsLock"
        },
        priority: 99,
        compile: function(tElem, tAttrs) {
            var originalFn, lockableFn;
            if (tAttrs.tmsLockPromoter === "Y" && tAttrs.ngClick) {
                originalFn = tAttrs.ngClick;
                lockableFn = "__lockable__" + originalFn;
                tAttrs.ngClick = lockableFn;
            }
            return {
                pre: function(scope, iElem, iAttrs) {
                    if (lockableFn) {
                        scope.$parent[lockableFn.replace(/(.*)/, "")] = function() {
                            var eleIndicator = document.createElement("div");
                            eleIndicator.classList.add("indicator");
                            scope.lock = true;
                            iElem.addClass("tms-lock-running");
                            iElem.append(eleIndicator);
                            scope.$parent[originalFn.replace(/(.*)/, "")].apply(scope, arguments).then(function() {
                                scope.lock = false;
                                iElem.removeClass("tms-lock-running");
                                iElem[0].removeChild(eleIndicator);
                            });
                        };
                    }
                    scope.$watch("lock", function(locked) {
                        if (locked === true) {
                            iElem.addClass("tms-locked");
                            iAttrs.$set("disabled", true);
                        } else if (locked === false) {
                            iElem.removeClass("tms-locked");
                            iAttrs.$set("disabled", undefined);
                        }
                    });
                }
            }
        }
    }
});
app.controller("ctrl", ["$scope", "$q", "$timeout", function($scope, $q, $timeout) {
    $scope.lock = false;
    $scope.longFn = function() {
        var defer;
        defer = $q.defer();
        $timeout(function() {
            defer.resolve();
        }, 10000);
        return defer.promise;
    };
    $scope.otherFn = function() {
        // do nothing
    };
}]);

2、設(shè)置運(yùn)行狀態(tài)的樣式

@keyframes tmsRunning{
    0%{transform:rotate(0deg);}
    12%{transform:rotate(45deg);}
    25%{transform:rotate(90deg);}
    37%{transform:rotate(135deg);}
    50%{transform:rotate(180deg);}
    62%{transform:rotate(225deg);}
    75%{transform:rotate(270deg);}
    87%{transform:rotate(315deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes tmsRunning{
    0%{-webkit-transform:rotate(0deg);}
    12%{-webkit-transform:rotate(45deg);}
    25%{-webkit-transform:rotate(90deg);}
    37%{-webkit-transform:rotate(135deg);}
    50%{-webkit-transform:rotate(180deg);}
    62%{-webkit-transform:rotate(225deg);}
    75%{-webkit-transform:rotate(270deg);}
    87%{-webkit-transform:rotate(315deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes tmsRunning{
    0%{-moz-transform:rotate(0deg);}
    12%{-moz-transform:rotate(45deg);}
    25%{-moz-transform:rotate(90deg);}
    37%{-moz-transform:rotate(135deg);}
    50%{-moz-transform:rotate(180deg);}
    62%{-moz-transform:rotate(225deg);}
    75%{-moz-transform:rotate(270deg);}
    87%{-moz-transform:rotate(315deg);}
    100%{-moz-transform:rotate(360deg);}
}
@-o-keyframes tmsRunning{
    0%{-o-transform:rotate(0deg);}
    12%{-o-transform:rotate(45deg);}
    25%{-o-transform:rotate(90deg);}
    37%{-o-transform:rotate(135deg);}
    50%{-o-transform:rotate(180deg);}
    62%{-o-transform:rotate(225deg);}
    75%{-o-transform:rotate(270deg);}
    87%{-o-transform:rotate(315deg);}
    100%{-o-transform:rotate(360deg);}
}
.btn.tms-lock-running {
    position: relative;
}
.btn.tms-lock-running .indicator::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 4px;
    margin-left: -2px;
    background: #333;
}
.btn.tms-lock-running .indicator {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1em;
    margin-top: -1em;
    border-radius: 1em;
    width: 2em;
    height: 2em;
    border: 2px solid #333;
    background: #fff;
    animation: tmsRunning 1s infinite;
    -webkit-animation: tmsRunning 1s infinite;
    -moz-animation: tmsRunning 1s infinite;
    -o-animation: tmsRunning 1s infinite;
}

3、給需要鎖定的元素添加屬性

long action
other action

示例

其他仍在考慮的問(wèn)題：1、是否允許用戶主動(dòng)解除頁(yè)面鎖定狀態(tài)？2、是否需要對(duì)硬的頁(yè)面導(dǎo)航操作，例如：后退，進(jìn)行控制？