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

【问题标题】：can I work with angular js ng-repeat and turn.js?我可以使用 Angular js ng-repeat 和 turn.js 吗？
【发布时间】：2015-04-29 10:47:33
【问题描述】：

我正在尝试使用 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
    });

【问题讨论】：

您在 HTML 中使用 class 并在 javascript 中定位 id
我删除了这个类，但仍然不起作用
任何控制台错误？你能给我们flipbook构造函数吗？
控制台错误是什么？如果加载了翻书，一旦加载了 DOM #flipbook 应该没有问题
不，没有控制台错误，它只是显示图像，就像我根本没有turn.js一样，实际上我没有带有flipbook构造函数的script.js文件，我有全部在html文件中

标签： javascript jquery html angularjs turnjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

我不相信有 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);

});

【讨论】：

即使使用 $timeout 翻书也无法正常工作，图像正在一个接一个地绘制