Question

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

我使用angular来解析json文件并提取图像路径，以便在我的视图中的$ scope变量中使用ng-repeat和turn.js来使flipbook动画使div看起来像杂志一样。

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

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

HTML

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


</div>

Flipbook init

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

Answer 1

我不相信有renderComplete事件或类似角色的事件;您可能必须按照建议here使用$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

我通过在flipbok的内部div中添加ngrepeat来弄明白！这是一件很傻的事情，但现在我有我的翻书了！

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

2 个答案: