Ajax でデータをサーバから取得してページの更新はローカル(ブラウザ)側で行うプログラムがあります。
ボタンをクリックしたら、サーバにリクエストを出すのですが、ページの更新までの処理に時間がかかるため、時計マークを表示しています。
この時計マークがボタンを押されてすぐに表示されないので、ボタンを押したらすぐに時計マークを表示するように修正をお願いされました。
コードを見るとAngularJSを使用しているようでトリガーには onClickではなく ng-click が使われていました。
[HTML] <div id="forward" ng-click="forwardAction();" title="forwardAction"></div> [js] $scope.forwardAction = function(){ $scope.displayWaitingIcon(); // ここで時計マークを表示 $scope.forwardActionExecute(); //ボタンを押した時の処理 }
これを以下のようにAngularJSを使わないように書き直すとすぐに時計マークは表示されます。
[HTML] <div id="forward" onClick="forwardAction();" title="forward"></div> [js] forwardAction function(){ $displayWaitingIcon(); // ここで時計マークを表示 //$scope.forwardActionExecute(); //ボタンを押した時の処理 } displayWaitingIcon function (){ // 時計マークを表示 }
しかし、これでは forwardAction() から AngularJS の関数を呼べないので以下のように書き換えたところ、またしても最初と同じように時計マークが表示されるまで時間がかかるようになてしまいました。
[js] forwardAction function(){ $displayWaitingIcon(); // ここで時計マークを表示 var element = document.getElementById("myElement"); var $scope = angular.element('#myElement').scope() $scope.forwardActionExecute(); //ボタンを押した時の処理 } displayWaitingIcon function (){ // 時計マークを表示 }
なんとか、ボタンを押したら時計アイコンをすぐに出力したいのですが、AngularJS のコード($scope.xxx) を呼ぶと時計アイコンがすぐに表示されません。
AngularJSを使いつつ、ボタンを押した直後に時計アイコンを出力させるにはどのようにしたらよろしいでしょうか?
ヒントだけでも教えていただけないでしょうか?
クライアント側は Windows 10/Google Chrome を使用しています。
以上よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/04 03:56
2019/05/04 06:42
2019/05/04 14:59