Question

以下HTML包含在我的ng-controller div

中

<div id="cards-slider">
    <div ng-repeat="card in cards">
        <a href="#" title="Title" ng-click="toggleFavorite(card)">
        <i class="icon-star" ng-class="card.isFavorite ? 'favorite' : ''"></i>
    </a>
        <div class="card-holder ng-cloak">
            <img src="{{ card.imageSrc }}" />
        <p><a href="#">{{ card.programName }}</a></p>                       
    </div>
    </div>
</div>

<a href="#" class="next ng-cloak" ng-show="cartsTotal > limit && isNotLastPage" ng-click="getNextCards()"></a>

当我点击getNextCards时，我将执行HTTP请求以获得更多卡片。成功回调我想开始一个jQuery动画（下面的代码），并且只有在完成之后我才想更新我的卡片模型。但这种方法不起作用，保持相同的卡。你有任何解决方法吗？感谢

$( "#cards-slider" ).animate({
    left: "-=500",
}, 100, function() {
    $scope.cards        =   data.elements;
    $scope.cartsTotal   =   data.total;
});

Answer 1

这是因为jquery ajax和animate函数在angular's digest cycle之外。您需要手动强制摘要。试试这个：

$( "#cards-slider" ).animate({
    left: "-=500",
}, 100, function() {
    $scope.cards        =   data.elements;
    $scope.cartsTotal   =   data.total;
    if (!$scope.$$phase) { // if digest is not already running
        $scope.apply();
    }
});

在动画完整回调中没有更新角度模型

1 个答案: