AngularJS 绑定(bind)在遍历翻页书时被破坏(turn.js)

Question

AngularJS + Turn.js

请引用 plunkr 查看问题所在。 http://plnkr.co/edit/tpzVrq0ISarXVnttK3oH?p=preview

问题:记录 ng-click 函数显示 ng-click 函数甚至没有被调用...这表明 Angular 绑定(bind)以某种方式被破坏...或者当前范围正在更改？？

出现此问题的条件:

1. 总页数>6。 &&
2. 已浏览至页面>6。

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

.turn('page', #)

可能会解决问题，或者有没有办法重新创建或重新编译 ng-directives...

请帮忙..

Answer 1

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

问题实际上在于 turn.js 的工作方式。它会删除页面并将其重新添加到 DOM，从而使 Angular 绑定(bind)(在本例中为 ng-click)消失。如果您从第 3 页、第 6 页、第 7 页开始单击，它们将停止工作。如果您从第 7 页开始，那么当您返回到包含链接的页面时，这些链接将停止工作。所以你可以http://plnkr.co/edit/TIwNzaOw1nde8ZAb7WQj?p=preview

在链接上创建 jQuery 委托(delegate)(而不是使用 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 时，这种情况总是会发生，在这种情况下，不可能不将它们两者混合。另一种方法是对页面、页面链接等使用不同的指令进行组合，以便在需要时重新编译它们(子指令)。但绑定(bind)事件的问题仍然是一个问题