ng-repeat в turn.js не работает

Я пытаюсь использовать 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

Примечание:- Я проверил в Интернете и нашел этот вопрос, но ответ не сработал для меня, так как он очень старый и не сработал. Я публикую это здесь в надежде на ответ. Новый фиксированный поршень будет признателен, если это возможно:) Могу ли я работать с угловыми js ng-repeat и turn.js?

Источник

1 ответ

Решение

Вы должны отложить вашу JQuery turn функция, потому что рендеринг DOM еще не завершен.

Так впрыскивать $timeout и оберните вашу функцию как:

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

Вот фиксированная плункерная ссылка

Источник
Другие вопросы по тегам