我发现了一些不受欢迎的行为，至少对我来说，当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部，点击最新的一个，你可以看到滚动不是在顶部，而是在中间。
我在我的一个应用程序中也发现了这个，我想知道如何让它滚动到顶部。我可以手动来做，但我认为应该有其他优雅的方法来做这个，我不知道。
那么，当路线改变时，是否有一种优雅的方式可以滚动到顶部?
当前回答
将自动滚动设置为true对我来说并没有什么用处，所以我选择了另一种解决方案。我构建了一个服务，每当路由发生变化时，它就会挂钩，并使用内置的$anchorScroll服务滚动到顶部。对我有用:-)。
服务:
(function() {
"use strict";
angular
.module("mymodule")
.factory("pageSwitch", pageSwitch);
pageSwitch.$inject = ["$rootScope", "$anchorScroll"];
function pageSwitch($rootScope, $anchorScroll) {
var registerListener = _.once(function() {
$rootScope.$on("$locationChangeSuccess", scrollToTop);
});
return {
registerListener: registerListener
};
function scrollToTop() {
$anchorScroll();
}
}
}());
注册:
angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
pageSwitch.registerListener();
}]);
其他回答
使用angularjs的UI路由器，我所做的是:
.state('myState', {
url: '/myState',
templateUrl: 'app/views/myState.html',
onEnter: scrollContent
})
:
var scrollContent = function() {
// Your favorite scroll method here
};
它在任何页面上都不会失败，而且它不是全局的。
将自动滚动设置为true对我来说并没有什么用处，所以我选择了另一种解决方案。我构建了一个服务，每当路由发生变化时，它就会挂钩，并使用内置的$anchorScroll服务滚动到顶部。对我有用:-)。
服务:
(function() {
"use strict";
angular
.module("mymodule")
.factory("pageSwitch", pageSwitch);
pageSwitch.$inject = ["$rootScope", "$anchorScroll"];
function pageSwitch($rootScope, $anchorScroll) {
var registerListener = _.once(function() {
$rootScope.$on("$locationChangeSuccess", scrollToTop);
});
return {
registerListener: registerListener
};
function scrollToTop() {
$anchorScroll();
}
}
}());
注册:
angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
pageSwitch.registerListener();
}]);
我终于得到了我需要的东西。
我需要滚动到顶部，但不想让一些过渡
您可以在逐路由级别上控制这一点。 我通过@wkonkel组合了上述解决方案，并在一些路由声明中添加了一个简单的noScroll: true参数。然后我在转换的时候抓住了它。
总而言之:在新的转场时，它会浮动到页面的顶部，在前进/后退转场时它不会浮动到顶部，并且它允许您在必要时覆盖此行为。
代码:(之前的解决方案加上一个额外的noScroll选项)
// hack to scroll to top when navigating to new URLS but not back/forward
let wrap = function(method) {
let orig = $window.window.history[method];
$window.window.history[method] = function() {
let retval = orig.apply(this, Array.prototype.slice.call(arguments));
if($state.current && $state.current.noScroll) {
return retval;
}
$anchorScroll();
return retval;
};
};
wrap('pushState');
wrap('replaceState');
把它放到你的app.run块中并注入$state…myApp.run(函数(状态){…})
然后，如果你不想滚动到页面顶部，创建一个这样的路由:
.state('someState', {
parent: 'someParent',
url: 'someUrl',
noScroll : true // Notice this parameter here!
})
有点晚了，但我已经尝试了所有可能的方法，没有一个能正常工作。以下是我的优雅解决方案:
我使用一个控制器来管理我所有的页面与ui-router。它允许我将未经过身份验证或验证的用户重定向到适当的位置。大多数人把他们的中间件放在他们的应用程序的配置中，但我需要一些http请求，因此全局控制器更适合我。
我的index.html看起来像这样:
<main ng-controller="InitCtrl">
<nav id="top-nav"></nav>
<div ui-view></div>
</main>
我的initCtrl.js是这样的:
angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
$rootScope.$on('$locationChangeStart', function(event, next, current){
// middleware
});
$rootScope.$on("$locationChangeSuccess", function(){
$timeout(function() {
$anchorScroll('top-nav');
});
});
});
所有可能的方法我都试过了，这个方法效果最好。
这为我工作，包括自动滚动
<div class=“ngView”autoscroll=“true”>
