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 回答