angularJS绑定被破坏掉了上穿越翻书（turn.js） [英] angularJS bindings getting destroyed on traversing the flipbook(turn.js)

问题描述

angularjs + turn.js

angularjs + turn.js

请参照plunkr看问题..
http://plnkr.co/edit/tpzVrq0ISarXVnttK3oH?p=$p$pview

Please refer the plunkr to see the problem.. http://plnkr.co/edit/tpzVrq0ISarXVnttK3oH?p=preview

问题：
记录的NG-点击功能显示，NG-点击功能甚至不被称作......这表明在某种程度上角绑定被破坏掉了......或者当前范围得到改变？

Problem: logging the ng-click function shows that the ng-click function is not even been called...which shows that somehow the angular bindings are getting destroyed...or the current scope is getting changed??

条件发生此问题：

1. > 6总页数。 ＆功放;＆安培;


2. 运行到页> 6

其实知道正在发生什么幕后一边拨打

Knowing what actually is happening behind the scenes while calling

.turn（页面'，＃）

.turn('page', #)

可能会解决问题，或者是有没有办法重建或重新编译NG-指令...

might solve the problem, or is there a way to recreate or recompile the ng-directives...

请帮助..

推荐答案

下面是我采取（与你code几清理）的 http://plnkr.co/edit/W1SZRRdr1V5UVEMA3vQe?p=$p$pview

Here's my take (with a few cleanups on your code): http://plnkr.co/edit/W1SZRRdr1V5UVEMA3vQe?p=preview

实际上，问题在于对 turn.js 的工作方式。它会删除并重新添加页面的DOM，使得角绑定（在这种情况下， NG-点击）消失。如果从第3页，6页，然后第7页点击，他们停止工作。如果按第7页开始，然后当你回来到包含链接页面停止工作。所以，你可以 http://plnkr.co/edit/TIwNzaOw1nde8ZAb7WQj?p=$p$ PVIEW

the problem actually lies on the way turn.js works. it removes and re-adds the pages to the DOM, making the Angular bindings (in this case ng-click) go away. If you start clicking from page 3, page 6 then page 7, they stop working. If you start by page 7, then when you come back to page containing the links stops working. So you can http://plnkr.co/edit/TIwNzaOw1nde8ZAb7WQj?p=preview

这是你的链接创建一个jQuery的委托（而不是使用 NG-点击）

Create a jQuery delegate on your links (instead of using 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和角度，在这种情况下是不可能不能混合她们两经常发生。另一种方法是使用不同的指令对于页面，页面链接等组成，当他们需要（次指令），他们得到重新编译。但随着事件的约束问题将仍然是一个问题。

this always happen when you are mixing jQuery and Angular, that in this case is impossible to not mix them two. Another way is to compose using different directives for pages, page links, etc, that they get recompiled when they need (sub directives). But the problem with bound events will remain an issue

这篇关于angularJS绑定被破坏掉了上穿越翻书（turn.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！