0

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

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

event.preventDefault();

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

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

提前致谢

4

2 回答 2

0

The entire source of ngClick is super simple https://github.com/angular/angular.js/blob/v1.2.0rc1/src/ng/directive/ngEventDirs.js#L43-L52

Effectively: 

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

So you can create your own very easily:

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-28T12:44:50.377 回答
0

看看这个类似的线程。 AngularJS 中的 ScrollTo 函数

我也有类似的挑战。我最终使用搜索属性进行滚动——这样我可以直接从 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-03T12:46:07.283 回答