CODEWITHSUNDEEP
javascriptangularjsturn.js
RamaKrishna Pittu
RamaKrishna Pittu

Reputation: 36

ng-repeat in the turn.js is not working

I'm trying to use turn.js in my application. I have found that it is working fine when I just use normal div's but when I use ng-repeat and create several div's , it was not working and just showing the contents of the div instead of the pages.

app.js file

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>

Here is the plunker which shows what I'm trying to do. http://plnkr.co/edit/6ZDBRXuNvOSX9kyZ2evq?p=preview

Note :- I have checked in internet and found this question , but the answer didn't work for me as that's very old one and didn't worked I'm posting this here hoping for answer. New fixed plunker would be appreciated if possible :) can I work with angular js ng-repeat and turn.js?

Upvotes: 2

Views: 393

Answers (1)

anoop
anoop

Reputation: 3822

You have to delay your jquery turn function because DOM rendering is not yet complete.

So inject $timeout and wrap your function like:

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

Here is fixed plunker link

Upvotes: 0

Related Questions