AngularJS で http リクエスト中画面内のボタンを disabled にする
とにかく面倒だから全部の 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>
関連エントリー
- Angular JS でビューを伴う Service ってどう書けばいいんですか 続きをかきました。 [tech] Angular JS で View を伴う Service 的なことをしたいとき、あるいは Directi...
- AngularJS 依存を持つ filter のテスト myApp = angular.module('myApp', [ 'myApp.filters', 'myApp.services' ])...
- JSDeferred -> Angular $q 置き換え方法 AngularJS には $qっていう promise の枠組みがあるので、使っておくといいこと (ビューが自動的に更新されるだけだけど) ...
- Angular JS で View を伴う Service 的なことをしたいとき、あるいは Directive に Controller をつけたいとき。 クソコード を書いたはいいが、釈然としなかった。 "View independent business logic: Services" と...
- Perl の Locale::Maketext::Lexicon::Gettext フォーマットのメッセージをJSでフォーマットする Perl の Locale::Maketext::Lexicon::Gettext は以下のような Gettext ライクなフォーマットを扱...