javascript - 使用 jQuery 动画回调无法正确更新我的 Angular 模型

Question

情况如下:我有一个面板，其中包含有限的元素列表。我在上面实现了某种 slider :当我单击按钮时，该面板向左移动，并返回更新项目列表(即下一页上显示的项目)。

我的代码如下所示:

<div id="slider" class="row">
  <span ng-repeat="d in data | startFrom: (page * pagination) | limitTo: pagination" class="col-lg-4 box" >{{ d }}</span>
</div>
<button id="ko" type="button" class="btn btn-danger" ng-click="nextPageAndAnimate();">Next page ({{ page }})</button>
<button id="ok" type="button" class="btn btn-success" ng-click="nextPage();">Next page ({{ page }})</button>

在 Angular Controller 端:

myApp.controller('MainCtrl', function($scope) {

    $scope.data = 'abcdefghijklmnopqrstuvwxyz'.split('');
    $scope.page = 0;
    $scope.pagination = 5;

    // Without animation, works correctly.
    $scope.nextPage = function() {
      $scope.page = $scope.page + 1;
    };

    // Use animation, not working correctly.
    $scope.nextPageAndAnimate = function() {
      console.log('Start animation');
      $('#slider').animate({ left: '-200px' }, 1000, function() {
        $scope.page = $scope.page + 1;
        console.log('Page updated');
        $(this).animate({ left: '0' }, 1000, function() {
          console.log('End of animation');
        });
      });
    };

});

您有关于此 Plunker 的完整示例.

我的想法如下:我启动动画来隐藏#slider。在动画的中间，我更新了 $scope.page 模型，要求 Angular 显示列表中接下来的 5 个元素。最后，我开始一个新的动画来再次显示 #slider。

使用 button#ok 时，我“简单地”更新了 $scope.page 模型值，以便分页正常工作，但没有动画。

如果我使用 button#ko，$scope.page 模型的更新无法正常工作，但我有动画:第一次单击时，框动画但显示相同的元素(即 $scope.page 仍然等于 0)。当我在动画之前第二次单击按钮时，元素会更新($scope.page 等于 1)，但最后，我得到了相同的元素。

我不确定为什么模型没有在正确的时刻更新，但我怀疑这是因为更新是在 jQuery animate 回调中进行的，不是吗？ 如何解决我的问题？

Answer 1

每当您更新动画中的页面时，您是否调用了scope.$apply()？将点击事件绑定(bind)到 Controller 函数时，Angular 很智能，会在执行这些事件时自动检查范围更改。

但是，在您的动画中，范围更新直到点击事件触发后几毫秒才会发生。 Angular 无法得知范围已更新。这就是 scope.$apply() 存在的原因。

另请参阅:https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()