SFDC：AngularJSのng-disabledでボタンの連続クリック操作をブロックする

Lockボタンクリック前

Lockボタンクリック後

HTML側は次のようになります。ng-disabledではOR条件なども利用することが可能です。

<div class="slds-m-top--medium">
    <button class="slds-button slds-button--destructive" ng-click="doLock($event)" ng-disabled="inputForm.$invalid || isLocked">Lock</button>
    <button class="slds-button slds-button--brand" ng-click="doUnLock($event)" ng-disabled="inputForm.$invalid || !isLocked">UnLock</button>
</div>

JS側です。変数『$scope.isLocked』を用意してクリック時に値を切り替えます。

var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('mainCtrl', ['$scope', function($scope) {
    $scope.accName = 'salesforce.com';
    $scope.isLocked = false;
    
    $scope.doLock = function(event) {
        event.preventDefault();
        $scope.isLocked = true;
        console.log('Lock!!');
    };
    
    $scope.doUnLock = function(event) {
        event.preventDefault();
        $scope.isLocked = false;
        console.log('UnLock!!');
    };
}]);

これだけで活性/非活性を切り替えて画面に反映することができます。今回、2つのボタンの活性/非活性を切り替えただけですが、実際は保存ボタン処理の最初で、保存ボタンを非活性にしてすべての処理が完了後に活性に戻します。これで連続クリックなどの操作をブロックできると思います。

注意点として、保存後に画面遷移を行うようなケースです。画面遷移処理が呼び出された後、ボタンを活性に戻す処理が実行されると、一瞬だけボタンが活性状態で表示されます。細かいところですが、画面遷移時にはボタンは活性に戻さないようにすると綺麗かなと思います。

ロック中はスピナーなどを表示すると使いやすいかもしれません。

Lightning Design Systemにもスピナー画像がいくつか用意されています。

<div class="slds-m-top--medium">
    <button class="slds-button slds-button--destructive" ng-click="doLock($event)" ng-disabled="inputForm.$invalid || isLocked">Lock</button>
    <button class="slds-button slds-button--brand" ng-click="doUnLock($event)" ng-disabled="inputForm.$invalid || !isLocked">UnLock</button>
    <div class="slds-spinner--medium slds-m-top--medium" ng-Show="isLocked">
        <img src="{!URLFOR($Resource.SLDS0121, '/assets/images/spinners/slds_spinner_brand.gif')}" alt="Loading..." />
    </div>
</div>

活性/非活性はng-disabledでしたが、表示/非表示の切り替えはng-Showまたはng-Hideで対応できます。

デモ動画

サンプルコード