Javascript 使用jQuery动画回调无法正确更新角度模型

情况是这样的：我有一个包含有限元素列表的面板。我在它上面实现了某种滑块：当我点击一个按钮时，这个面板向左移动，并返回更新项目列表（即下一页上的项目）

我的代码如下所示：

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

你有这方面的完整例子

我的想法如下：我启动动画以隐藏

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

当使用
按钮#ok
时，我“简单地”更新
$scope.page
模型值，这样分页工作正常，但没有动画

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

我不确定为什么模型没有在正确的时刻更新，但我怀疑这是因为更新是在jQuery
animate
回调中进行的，不是吗？
如何解决我的问题？
每当您更新动画中的页面时，是否调用了
scope.$apply（）
？Angular在将单击事件绑定到控制器函数时是智能的，在执行它们时自动检查范围更改

但是，在动画中，范围更新直到触发单击事件后几毫秒才会发生。angular无法判断作用域是否已更新。这就是存在$apply（）
作用域的原因

另请参见：
您可以使用
++
来递增，即
$scope.page++
（虽然不是解决方案）可能$scope不在回调函数的作用域内？@NigelAngel是的，使用
++
不会有任何区别。我认为，
$scope.page
在回调函数中可用，因为它在最后更新。我的想法是模型被更新了，但是Angular没有意识到这种修改，因为它不是由他做的，而是由jQuery做的……你看了吗？你证实了我的怀疑，这正是我想要的。谢谢
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');
        });
      });
    };

});