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。

使用button#ok时，我只是＆＃34;＆＃34;更新$scope.page模型值，因此分页工作正常，但没有动画。

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

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

Answer 1

每当您更新动画中的页面时，您是否曾致电scope.$apply()？将click事件绑定到控制器函数时，Angular是智能的，在执行时会自动检查范围更改。

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

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

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

1 个答案: