1

angular.js は初めてです。コントローラーで非同期イベントを処理する方法について混乱しています。

たとえば、あるページに という名前のビューがありますcount。ボタンをクリックしている間、コントローラーはカウントを 1 増やします。ただし、この増加は非同期です。私が望むのは、count変更すると、ビューに通知され、その値が変更されることです。しかし、次のクリックを利用しても、ビューはその値を変更しません。

これは例えばコードです:

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>

  <body>
    <div ng-controller="Controller">
      {{ count }}
      <form ng-submit="delayInc()">
        <input type="submit" value="Add" />
      </form>
    </div>

    <script>
      function Controller($scope) {
        $scope.count = 0;

        $scope.delayInc = function () {
          setTimeout(function () {
            $scope.count += 1;
          }, 1000);
        };
      }
    </script>
  </body>
</html>

アップデート：

ご回答ありがとうございます。しかし、私は生成の質問をしています。setTimeout関数は http リクエストでしょうか。私はこれができることを知って$httpいます。しかし、関数がファイルなどを処理するものである場合はどうなるでしょうか? 私は、すべての非同期呼び出しにサービスがあることを除いてはありません。存在しない場合、自分で作成する必要がありますか?

4

2 に答える 2

4

ネイティブの代わりに$timeoutサービスを使用しsetTimeoutます。

function Controller($scope, $timeout) {
    //                      ^---- Don't forget to inject the service
    $scope.count = 0;

    $scope.delayInc = function () {
        $timeout(function () {
            $scope.count += 1;
        }, 1000);
    };
}

または、以下を使用して変更を手動で適用するように Angular に指示することもできますScope.$digest()($timeout上記のサービスが効果的にこれを行います)。

function Controller($scope) {
    $scope.count = 0;

    $scope.delayInc = function () {
        setTimeout(function () {
            $scope.count += 1;
            $scope.$digest();
        }, 1000);
    };
}
于 2013-06-18T10:46:37.257 に答える
0

AngularJS の $scope の性質上、setTimeout呼び出しを$timeoutサービスに置き換える必要があります。

于 2013-06-18T10:47:47.033 に答える