使用jQuery动画回调不能正确更新我的Angular模型

Question

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

我的代码看起来像这样：

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

在角度控制器方面：

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 。

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

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

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

Answer 1

你有没有在动画中更新页面时调用scope.$apply() ？ 将click事件绑定到控制器函数时，Angular是智能的，在执行时自动检查范围更改。

但是，在动画中，只有在触发click事件后几毫秒才会发生范围更新。 角度无法告知范围已更新。 这就是scope.$apply()原因scope.$apply()存在。

另见： https ： //github.com/angular/angular.js/wiki/When-to-use-$scope.$apply（）