gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:29:45 24 4
gpt4 key购买 nike

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...

请帮忙..

最佳答案

这是我的看法(对您的代码进行了一些清理):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)事件的问题仍然是一个问题

关于AngularJS 绑定(bind)在遍历翻页书时被破坏(turn.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22599891/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com