Angular中链接和滚动到顶部的标准方式

Standard way to link and scroll to top in Angular?

本文关键字：顶部 标准 方式 滚动 链接 Angular      更新时间：2023-09-26

我的问题是，href保留滚动位置，但我想有我的链接去页面的顶部;我现在的解决方案感觉不是很DRY。

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'">

现在控制器本身不应该有明确定义的函数。

根据这个:

我能让一个函数在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，并学习如何在可能的情况下制作指令(服务?)谢谢!

你可以这样做:

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);
                 });
            }
        }
    }]);
相关文章：