如何让Jquery scrollTo插件与AngularJS一起工作 - 无闪烁

我试图将Jquery的scrollTo插件与AngularJS结合起来。我想这样做的原因是，如果使用相应的URL，我希望自动滚动到网站的特定部分。到现在为止，这种方法可行，但并不完美如果在动画开始之前点击链接，则会出现短暂闪烁。如何让Jquery scrollTo插件与AngularJS一起工作 - 无闪烁

我认为这个问题可以通过使用来解决：

event.preventDefault();

但我不知道怎么了preventDefault函数的调用与我的AngularJS代码结合在一起......我是新来AngularJS所以也许有一个我现在还不知道的简单解决方案。我尝试了几个我在网上找到但没有成功的解决方案。

在这里你可以找到当前解决方案的摘要：http://jsfiddle.net/Hcb4b/6/ 因为我不能包括宽松插件这不是可运行...提前

感谢

来源

2013-08-28 Oliver13

请在演示环境提供了一个例子，如的jsfiddle 。不得不剖析一个活网站的代码并不理想，并且意味着你会得到更少（如果有的话）的答案。 –

好的，谢谢你的提示。我将使用JSFiddle。 – Oliver13

我自己找到了一个解决方案：[AngularJS。如何禁用自动滚动到我的页面顶部]（http://stackoverflow.com/questions/14530572/angularjs-how-to-disable-auto-scroll-to-top-of-my-page/14534133#14534133 ） – Oliver13

ngClick的整个源超简单 https://github.com/angular/angular.js/blob/v1.2.0rc1/src/ng/directive/ngEventDirs.js#L43-L52

有效：

ng.directive('ngClick',['$parse',function($parse){ 
     return function(scope, element, attr) { 
     var fn = $parse(attr['ngClick']); 
     element.on('click', function(event) { 
      scope.$apply(function() { 
      fn(scope, {$event:event}); 
      }); 
     }); 
     }; 
    }]);

所以，你可以创建自己很容易：

yourModule.directive('superClick',['$parse',function($parse){ 
     return function(scope, element, attr) { 
     var fn = $parse(attr['superClick']); 
     element.on('click', function(event) { 
      event.preventDefault(); // Magic stuff 
      scope.$apply(function() { 
      fn(scope, {$event:event}); 
      }); 
     }); 
     }; 
    }]);

来源

2013-08-28 12:44:50 basarat

谢谢你的回答。我用这个解决方案[eat-click]（http://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor-tags-in-angularjs）allready。我认为它是相似的，但在我的情况不起作用... – Oliver13

我试过你的解决方案，但闪烁仍然存在... – Oliver13

然后原来的假设关于'event.preventDefault（）;'是解决方案是错误的，我想 – basarat

退房此线程是类似的。 ScrollTo function in AngularJS

我有类似的挑战。我结束了使用搜索属性来滚动 - 这种方式我可以直接从URL访问目标元素。我最终在rootScope上使用了一个手表来改变$ location.search来触发滚动。

闪烁是由页面重新加载引起的 - 要禁用“闪烁”，请在您的路由中设置reloadOnSearch: false。

下面是滚动码：

.run(function($location, $rootScope) { 
    $rootScope.$on('$viewContentLoaded', function() { 
    $rootScope.$watch(function() { return $location.search() }, function(search) { 
     var scrollPos = 0 
     if (search.hasOwnProperty('scroll')) { 
     var $target = $('#' + search.scroll); 
     var scrollPos = $target.offset().top; 
     } 
     $("body,html").animate({scrollTop: scrollPos}, "slow");                                          
    }); 
    });  
})

您现在可以使用干净的锚标签没有指令，像这样：

<a ng-href="#/?scroll=myElement">My element</a>

来源

2013-09-03 12:46:07

如何让Jquery scrollTo插件与AngularJS一起工作 - 无闪烁

回答

相关问题