更新

Question

我是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可以做到这一点。但是如果函数处理文件等等怎么办？我没有，除了每个异步电话都有我的服务。如果它不存在，我是否需要自己编写？

Answer 1

使用$timeout service代替原生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);
    };
}

Answer 2

由于AngularJS $范围的性质，您需要使用setTimeout服务替换$timeout来电。

如何在angular.js控制器中处理异步？

更新

2 个答案: