Question

我试图在我的应用程序中使用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>

这是一个能够展示我想要做的事情的掠夺者。 http://plnkr.co/edit/6ZDBRXuNvOSX9kyZ2evq?p=preview

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

Answer 1

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

所以注入$timeout并将你的函数包装成：

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

此处已修复plunker link

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

1 个答案: