0

这就是我打算让我的应用程序工作的方式：

单击按钮时，将发送 HTTP 请求以获取更多项目，并且返回的项目数组将附加到模型中的现有项目。

所以我将ng-click按钮设置为一个表达式，在该表达式中调用一个函数来请求更多项目。

但它并没有像我预期的那样工作，第一次单击正确更新了模型，但 UI 中的项目列表没有反映更改。

我怀疑这是因为请求过程是异步的，所以我设置了以下实验：

HTML：

<div ng-app  ng-controller="ItemController">
  <ul>
      <li ng-repeat="item in items">{{ item }}</li>
  </ul>
  <button ng-click="append()">Duplicate Items!</button>
</div>

JS(同步)

function ItemController($scope) {
    $scope.items = [1, 2, 3];

    $scope.append = function () {
        $scope.items = $scope.items.concat($scope.items);
    };
}

JS（异步）

function ItemController($scope) {
    $scope.items = [1, 2];

    $scope.append = function () {
        setTimeout(function () {
            $scope.items = $scope.items.concat($scope.items);
            console.log($scope.items);
        }, 500);
    };
}

jsfiddle 链接

事实证明，同步版本可以正常工作，而异步版本就像我的应用程序一样失败。

可能是什么原因？

4

1 回答 1

0

尝试替换setTimeout为$timeout（http://docs.angularjs.org/api/ng.$timeout），它会正确更新侦听器：

http://jsfiddle.net/6tUKM/

function ItemController($scope, $timeout) {
    $scope.items = [1, 2, 3];

    $scope.append = function () {
        $timeout(function () {
            $scope.items = $scope.items.concat($scope.items);
            console.log($scope.items);
        }, 500);
    };
}

或者您可以手动执行此操作：

$scope.append = function () {
    var f = function () {
        $scope.items = $scope.items.concat($scope.items);
        console.log($scope.items);
    };
    setTimeout(function () {
        $scope.$apply(f)
    }, 500);
};
于 2013-06-01T04:25:22.330 回答