AngularJS で http リクエスト中画面内のボタンを disabled にする

tech | 15:27 |

とにかく面倒だから全部の http リクエストを監視してボタンをオフにしたい。という要件

いまいちいい方法が思いうかばないけど以下のようにして実現した

http の状態管理するサービスをつくる

myApp.factory('httpState', function () {
    return {
        processing: 0
    };
});

$httpProvider のインターセプターで http の状態を更新する

myApp.config(function ($httpProvider) {
    $httpProvider.interceptors.push(function (httpState) {
        return {
            'request': function (config) {
                httpState.processing++;
                return config;
            },
            'response': function (response) {
                httpState.processing--;
                return response;
            }
        };
    });
});

コントローラでスコープに入れておく

myApp.controller(function ($scope, $http, httpState) {
    $scope.httpState = httpState;
});

テンプレートで状態を見て disabled にする

<button ng-disabled="httpState.processing > 0">foobar</button>