javascript - 我可以使用 Angular js ng-repeat 和 turn.js 吗？

Question

我正在尝试使用 turn.js 和 angular.js 制作杂志

我正在使用 Angular 解析 json 文件并提取图像路径，以便在我的视图中的 $scope 变量中使用它，使用 ng-repeat 和 turn.js 制作翻书动画，使 div 看起来像杂志。

但它不会生成翻书，只是一个接一个地绘制图像。

请帮忙！我把代码放在这里

HTML

       <div id="flipbook" class="flipbook"ng-repeat="slide in slides">
        <div><img src="{{slide.path_main}}"></div>
       </div>      


</div>

动画书初始化

   $("#flipbook").turn({
        width: 1724,
        height: 772,
        autoCenter: true
    });

Answer 1

我不相信有renderComplete角度的事件或类似的事情；您可能必须按照此处$timeout的建议使用。

// i'm taking assumptions with your code, but...

$scope.slides = [];

$http.get('/data/slides.json').success(function(data){

  $scope.slides = data;

  $timeout(function(){

    $("#flipbook").turn({
      width: 1724,
      height: 772,
      autoCenter: true
    });

  }, 0);

});

Answer 2

我通过在翻书的内部 div 中添加 ngrepeat 来解决这个问题！这是一件很愚蠢的事情，但现在我有了完美的翻书！