Angular コントローラー内での DOM 操作が間違っているようです。しかし、これはいくつかの頭痛の種なしでは実現しません:)
ボタンがあり、ng-クリックすると、バックグラウンドで非同期リクエストが実行されます。その非同期リクエストの間、すべてのボタン (およびおそらくページ上のさらにいくつかの要素) を無効にし、クリックされたボタンで読み込み中のアイコンを再生したいと思います。
これを行う最もクリーンな方法は何ですか?
Angular コントローラー内での DOM 操作が間違っているようです。しかし、これはいくつかの頭痛の種なしでは実現しません:)
ボタンがあり、ng-クリックすると、バックグラウンドで非同期リクエストが実行されます。その非同期リクエストの間、すべてのボタン (およびおそらくページ上のさらにいくつかの要素) を無効にし、クリックされたボタンで読み込み中のアイコンを再生したいと思います。
これを行う最もクリーンな方法は何ですか?
私は通常、loading と呼ばれる $scope の変数を使用してこれを行います。非同期操作が発生するたびに、true に設定してください。次に、無効にする必要があるもの、またはその他の方法で影響を受けるものは、その状態に基づくことができます。
ダミー コントロールを次に示します。
function TestCtrl($scope, $http) {
$scope.loading = false;
$scope.doASynch = function () {
$scope.loading = true;
$http.get("/url").success(function () {
$scope.loading = false;
});
}
}
そして、こちらがテンプレートのサンプルです。
<div ng-controller="TestCtrl">
<a class="button" ng-disabled="loading" ng-click="doASynch()">
<span ng-hide="loading">Click me!</span>
<span ng-show="loading">Loading....</span>
</a>
</div>
ここにまさにあなたが探しているものがあります
Angular JS での非同期 HTTP リクエストによるアニメーションの読み込み
var app = angular.module('myapp', ["ui.utils", "ui.router"]);
app.factory('iTunesData', function($http) {
return {
doSearch: function(sQuery) {
//return the promise directly.
return $http.jsonp('http://itunes.apple.com/search', {
params: {
"callback": "JSON_CALLBACK",
"term": sQuery
}
});
}
}
});
app.controller('iTunesSearch', function($scope, $location, $routeParams, iTunesData) {
$scope.search = function() {
iTunesData2.doSearch($scope.searchTerm)
.then(function(result) {
$scope.data = result.data;
$location.path($scope.searchTerm);
});
}
$scope.searchTerm = $location.$$path.split("/")[1];
if($scope.searchTerm!="") {
$scope.search();
}
});