Question

angularjs + turn.js

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

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

出现此问题的条件：

总页数＆gt; 6。＆安培;＆安培;
遍历页面＆gt; 6.

在调用

.turn（'page'，＃）

可以解决问题，还是有办法重新创建或重新编译ng-directives ......

请帮助..

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时，总会发生这种情况，在这种情况下，不可能将它们混合在一起。另一种方法是使用不同的页面，页面链接等指令，在需要时重新编译它们（子指令）。但绑定事件的问题仍将是一个问题

angularJS绑定在遍历flipbook时被破坏（turn.js）

1 个答案: