Question

我正在尝试将Jquery的scrollTo插件与AngularJS结合使用。我想这样做的原因是，如果使用相应的URL，我想自动滚动到网站的特定部分。到目前为止，这有效，但并不完美。如果在动画开始之前点击链接，则会出现短暂的闪烁。

我认为问题可以通过以下方式解决：

event.preventDefault();

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

您可以在此处找到当前解决方案的摘要：http://jsfiddle.net/Hcb4b/6/ 它不可运行，因为我不能包含缓动插件......

提前致谢

Answer 1

整个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});
          });
        });
      };
  }]);

Answer 2

查看这个类似的线程。 ScrollTo function in AngularJS

我遇到了类似的挑战。我最终使用search属性进行滚动 - 这样我就可以直接从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>

如何让Jquery scrollTo插件与AngularJS一起使用 - 没有闪烁

2 个答案: