1

I'm trying to make a magazine using turn.js and angular.js

I'm using angular to parse the json file and extract the image path for using it in a $scope variable in my view with ng-repeat and the turn.js to make the flipbook animation to make the div look like a magazine.

But it doesnt generate the flipbook and just draw the images one after other.

Please help! I put the code right here

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
    });
Pogrindis
  • 7,755
  • 5
  • 31
  • 44
Adolfo Guevara
  • 11
  • 5
  • you're using a `class` in your HTML and targeting an `id` in your javascript – Pogrindis Feb 26 '15 at 21:21
  • I remove the class and still does'nt work – Adolfo Guevara Feb 26 '15 at 21:25
  • any console error ? Can you give us the `flipbook` constructor ? – Pogrindis Feb 26 '15 at 21:28
  • what is the console error ? If flipbook is loaded, there should be no problem once the DOM #flipbook is loaded – Pogrindis Feb 26 '15 at 21:31
  • no, no console error, it just display the images, like i didnt have turn.js at all, in fact i dont have a script.js file with the constructor of the flipbook, i have it all in the html file – Adolfo Guevara Feb 26 '15 at 21:33
  • Maybe a race condition? I'm not familiar with flipbook, but if it's parsing the DOM before ngRepeat adds children you might need to tell it to parse again via ng-repeat-end – bvaughn Feb 26 '15 at 21:38
  • need to run the code from a directive, and let angular build the html before initializing. Can check for `$last` within `ng-repeat` as a trigger or use API for each element and add page in sub directive – charlietfl Feb 26 '15 at 21:38
  • interesting problem, im not sure but has angular got a composition complete trigger ? -> Post compose trigger ? – Pogrindis Feb 26 '15 at 21:38

2 Answers2

0

I don't believe there is a renderComplete event or anything like that in angular; you may have to use $timeout as suggested here.

// 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);

});
SteamDev
  • 4,294
  • 5
  • 20
  • 29
-1

I figure it out by adding the ngrepeat in the inner div of the flipbok! It was such a silly thing but now I have my flipbook perfct!

Adolfo Guevara
  • 11
  • 5