can I work with angular js ng-repeat and turn.js?

风流意气都作罢 提交于 2019-12-08 04:21:57

问题


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

回答1:


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

});



回答2:


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!



来源:https://stackoverflow.com/questions/28752950/can-i-work-with-angular-js-ng-repeat-and-turn-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!