2

基本的に再利用可能なフォームであるカスタム ディレクティブを作成しました。フォームの一部は、以下を使用するエラー メッセージ表示ですng-switch。

<div ng-switch="status">
  <span ng-switch-when="Error" class="text-error">Error encountered</span>
  <span ng-switch-when="Verifying" class="text-info">Verifying</span>
  <span ng-switch-when="Success" class="text-success">Success</span>
  <span ng-switch-default>&nbsp;</span>
</div>

ディレクティブのコントローラーで、サーバーで検証を実行する関数を定義しました。

$scope.verify = function () {
   $scope.status = 'verifying';
   socket.emit('verify', $scope.data, function(result) {
     $scope.status = result;
   });
};

この関数はlink、入力ボックスのぼかしイベントで関数によって呼び出されます。

私が気づいているのは、「検証中」状態が表示されないことですが、「エラー」/「成功」状態は正常に機能します。ng-switch現在のディレクティブの処理が完了した後にのみ、AngularJS がディレクティブを処理しているようです。

私が間違っていることはありますか？検証中の状態が表示されるように、この動作を回避する方法はありますか?

4

1 に答える 1

2

変数は、Angular が$digestサイクルを完了してビューをレンダリングする前に変化しています。emitを介して非同期で呼び出してみてください$timeout。これにより、フレームワークが現在のビューをレンダリングし、後でデータの読み込みが完了したときに更新できるようになります。

$scope.verify = function () {
   function afterLoading(){
       socket.emit('verify', $scope.data, function(result) {
           $scope.status = result;
       });
   }
   $scope.status = 'verifying';
   $timeout(afterLoading, 0);
};

$timeout(コントローラーにサービスを注入することも忘れないでください)

于 2013-05-26T21:28:00.727 に答える