angularJS绑定在遍历flipbook时被破坏(turn.js)

Question

angularjs + turn.js

请参考plunkr以查看问题.. http://plnkr.co/edit/tpzVrq0ISarXVnttK3oH?p=preview

问题:记录ng-click函数显示ng-click函数甚至没有被调用...这表明角度绑定在某种程度上被破坏......或者当前范围正在变化？

出现此问题的条件:

1. 总页数> 6.&&
2. 遍历页面> 6.

在调用时了解幕后实际发生的事情

.turn('page',#)

可能会解决问题,或者有没有办法重新创建或重新编译ng指令...

请帮忙..

Answer 1

这是我的看法(对您的代码进行了一些清理):http://plnkr.co/edit/W1SZRRdr1V5UVEMA3vQe？p = preview

问题实际上在于turn.js工作方式.它删除并重新添加页面到DOM,使Angular绑定(在这种情况下ng-click)消失.如果您从第3页,第6页和第7页开始点击,它们将停止工作.如果从第7页开始,那么当您返回包含链接的页面时,将停止工作.所以你可以http://plnkr.co/edit/TIwNzaOw1nde8ZAb7WQj?p=preview

在链接上创建一个jQuery委托(而不是使用ng-click):

var test=angular.module('test', [])

test.directive('flipbook', function(){
  return{
    restrict: 'E',
    replace: true,
    compile: function(element, attrs){
      element.turn({
        width: '300px',
        height: '300px',
        pages: 8,
      }).turn('peel','br');

      element.addClass('flipbook');

      return function(scope, el) {
        el.on('click', '[data-page]', function(e){
          el.turn('page', $(e.target).data('page'));
        });
      };
    },
    templateUrl: "flipbook.html"
  }
});

当你混合使用jQuery和Angular时,总会发生这种情况,在这种情况下,不可能将它们混合在一起.另一种方法是使用不同的页面,页面链接等指令,在需要时重新编译它们(子指令).但绑定事件的问题仍将是一个问题