ng-repeat in the turn.js is not working
Question
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?
1 answers
solution1
0 ACCPTED 2017-07-13 07:33:08
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.