turn.js 中的 ng-repeat 不起作用答案

【问题标题】：ng-repeat in the turn.js is not workingturn.js 中的 ng-repeat 不起作用
【发布时间】：2017-07-13 15:33:08
【问题描述】：

我正在尝试在我的应用程序中使用 turn.js。我发现当我只使用普通 div 时它工作正常，但是当我使用 ng-repeat 并创建多个 div 时，它不起作用并且只显示 div 的内容而不是页面。

app.js 文件

var test=angular.module('test', [])

test.directive('flipbook', function(){
  return{
    restrict: 'E',
    scope : {
      data : '='
    },
    link: function(scope, element, attrs){
      $('#flipbook').turn({
        width: '300px',
        height: '300px',
        pages: 8
      });

      $('#flipbook').turn('peel', 'br');
    },
    controller: function($scope){
      $scope.show_page = function(page){
        console.log("page", page)
        $('#flipbook').turn('page', page);
      }
    },
    //template : '<div id="flipbook"><div ng-repeat="pageNum in data">{{pageNum}}</div></div>'
    //template : '<div id="flipbook"><div>PAGE {{data[2]}}</div><div>PAGE 1</div></div>'
    templateUrl: "flipbook.html"
  }
});

flipbook.html

<div id="flipbook"><div ng-repeat="pageNum in data">{{pageNum}}</div></div>

index.html

<body>
    <flipbook data="['1','2','3','4','5','6']"></flipbook>
  </body>

这是显示我正在尝试做的事情的 plunker。 http://plnkr.co/edit/6ZDBRXuNvOSX9kyZ2evq?p=preview

注意：-我已经在互联网上检查并发现了这个问题，但答案对我不起作用，因为那是一个非常旧的问题并且没有用我在这里发布这个希望得到答案。如果可能的话，将不胜感激新的固定 plunker :) can I work with angular js ng-repeat and turn.js?

【问题讨论】：

标签： javascript angularjs turn.js

【解决方案1】：

您必须延迟您的 jquery turn 函数，因为 DOM 渲染尚未完成。

所以注入 $timeout 并像这样包装你的函数：

$timeout(function(){
        $('#flipbook').turn({
        width: '300px',
        height: '300px',
        pages: 8
       });
       $('#flipbook').turn('peel', 'br');
     }, 0);

这里是固定的plunker link

【讨论】：