如何讓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一起工作 - 無閃爍

回答

相關問題