在Angular中鏈接並滾動到頂部的標準方式？

Question

我的問題是，href保留滾動位置，但我希望我的鏈接轉到頁面的頂部;我目前的解決方案不會感覺非常乾燥。

HTML：

<a href="" ng-click="goToPage()"></a> 

JS：

app.controller("SomeController", function(..., $location) { 
    //this ends up being repeated in many controllers 
    $scope.goToPage = function() { 
     $location.path('/some/page'); 
     window.scrollTo(0,0); 
    } 
}); 

有沒有一種方法，使這樣的指令？

<a href="" ng-link="'some/page'"> 

現在應該沒有在控制器本身明確定義的功能。

根據此：

Can I make a function available in every controller in angular?

另一種解決方案是，我可以把$ rootScope內部的功能，並使用它像這樣：

HTML：

<a href="" ng-click="goToPage('some/page')"></a> 

JS：

app.run(function(..., $location) { 
    $rootScope.goToPage = function(url) { 
     $location.path(url); 
     window.scrollTo(0,0); 
    } 
}); 

現在我不需要重複每個控制器內部的函數，但我認爲這是避免$ rootScope並瞭解如何儘可能地制定指令（服務？）的好地方。謝謝！

Answer 1

你可能只是這樣做：

app.run(function($rootScope, $window) { 
    $rootScope.$on('$routeChangeSuccess', function() { 
     $window.scrollTo(0,0); 
    }); 
}); 

，它會滾動到任何路由變化的頂部。

如果你真的想它作爲一個指令：

angular.module('app') 
    .directive('ngLink', ['$location', '$window', function ($location, $window) { 
     return { 
      restrict: 'A', //use as attribute 
      replace: false, 
      scope: { 
       'ngLink' : '@' //so you can do ng-link="some-page" 
           //instead of ng-link="'some-page'" 
      }, 
      link: function (scope, elem) { 
       elem.on('click', function() { 
        $location.path(scope.ngLink); 
        //$window.location.href = scope.ngLink; 
        //you may have to use the line above depending 
        //on how your project is set up 
        $window.scrollTo(0,0); 
       }); 
      } 
     } 
    }]);