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

Question

我正在尝试使用 turn.js 和 angular.js

制作一本杂志

我正在使用 angular 解析 json 文件并提取图像路径，以便在我的视图中使用 ng-repeat 和 turn.js 在 $scope 变量中使用它制作翻书动画，使 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

我认为 angular 中没有 renderComplete 事件或类似事件；您可能必须按照建议使用 $timeout here。

// 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 来解决这个问题！这是一件多么愚蠢的事情，但现在我有了完美的翻页簿！

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

can I work with angular js ng-repeat and turn.js?

html

javascript

jquery

angularjs

turnjs