turn.js中的ng-repeat無法正常工作

Question

我正在嘗試在我的應用程序中使用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

注意：-我已經在互聯網上簽到並找到了這個問題，但是答案對我來說不起作用，因為那是一個非常老的問題，並且沒有任何作用，我在此發布以希望得到答案。 如果可能的話，將不勝感激新的固定螺絲釘:) 我可以使用Angular js ng-repeat和turn.js嗎？

Answer 1

您必須延遲jquery turn函數，因為DOM渲染尚未完成。

因此注入$timeout並包裝您的函數，如：

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

這是固定的插銷鏈接

turn.js中的ng-repeat無法正常工作

問題描述

1 個解決方案

解決方案1
0 已采納 2017-07-13 07:33:08

turn.js中的ng-repeat無法正常工作

問題描述

1 個解決方案

解決方案1 0 已采納 2017-07-13 07:33:08

解決方案1
0 已采納 2017-07-13 07:33:08