无法弄清页面为什么会加载到底部？Angular UI-Router自动滚动问题

11 浏览
0 Comments

无法弄清页面为什么会加载到底部？Angular UI-Router自动滚动问题

对我来说，我无法解释为什么这个主页在底部加载。这是一个angular ui-router、angular、javascript还是CSS的问题？我已经困扰了两个小时，不知道为什么我的html页面在底部而不是顶部加载，这真的让我作为一个程序员的自尊心受到了打击 :/

这是主页的链接：[链接已删除]

更新 --

我解决了这个问题。问题出在Angular UI-Router上。请参见下面的答案了解简单的修复方法。

我使用Angular和Angular UI-Router，设置如下...

default.jade

doctype html

html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')

include ../includes/head

body(ng-controller="RootController")

block content

include ../includes/foot

index.jade

extends layouts/default
block content
  section.container
    div(ui-view="header")
    div(ui-view="content")
    div(ui-view="footer")

Angular Config.js

window.app.config(function($stateProvider, $urlRouterProvider) {
// 对于任何未匹配的URL，重定向到“/”
$urlRouterProvider.otherwise("/");
// 现在设置状态
$stateProvider
    .state('home', {
      url: "/",
      views: {
        "header":    { templateUrl: "views/header/home.html"   },
        "content":   { templateUrl: "views/content/home.html"  },
        "footer":    { templateUrl: "views/footer/footer.html" }
      },
      resolve: { factory: setRoot }
    })
    .state('signin', {
      url: "/signin",
      views: {
        "header":    { templateUrl: "views/header/signin.html"   },
        "content":   { templateUrl: "views/content/signin.html"  },
        "footer":    { templateUrl: "views/footer/footer.html" }
      },
      resolve: { factory: setRoot }
    })

0

3 答案

0 Comments

在这个问题中，页面在底部加载的原因可能是由于自动滚动功能不起作用。以下是一些解决方法：

一种可能的解决方法是使用一个临时解决办法，因为自动滚动对我不起作用，所以我强行将视图滚动到顶部。希望这对你有帮助。

app.run(['$window', '$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager',  '$timeout', function($window, $rootScope, $location, $cookieStore, $state,CacheManager, $timeout){
$rootScope.$on('$viewContentLoaded', function(){
var interval = setInterval(function(){
  if (document.readyState == "complete") {
      window.scrollTo(0, 0);
      clearInterval(interval);
  }
},200);
});
}]);

这对我起作用。我还能简单地移除以下代码，它工作正常并消除了200毫秒的延迟。

$rootScope.$on('$viewContentLoaded', function(){
      window.scrollTo(0, 0);
     });

更好的解决方法是使用$anchorScroll()而不是window.scrollTo。我现在使用锚点滚动，它可以工作。

$rootScope.$on("$viewContentLoaded", function(){
    $anchorScroll();
});

"$rootScope.$on("$viewContentLoaded", function(){ $anchorScroll(); });" 对我无效。但这个解决办法有效：

$rootScope.$on('$viewContentLoaded', function(){
    window.scrollTo(0, 0);
});

简单又高效 🙂 谢谢提供解决方案。

0
0 Comments

在运行块中添加以下代码：

$rootScope.$on('$stateChangeSuccess', function () {
  $anchorScroll();
});

当然，你需要注入$anchorScroll依赖项。在使用ui-router时，应该使用"stateChangeSuccess"，因为"routeChangeSuccess"是针对ng-router的，我猜测？

0
0 Comments

最近Angular UI-Router更新了应用程序，使得默认情况下自动滚动到新加载的视图。这导致我的应用程序的页面在加载时滚动到了底部。要关闭这个功能，只需在ui-view中添加以下属性：

<div ui-view="header" autoscroll="true"></div>

。我遇到了OP描述的问题，这对我有效，但我必须在多个子兄弟节点的ui-view div中添加这个属性。自从这个帖子发布以来，ui-router已经改变了autoscroll的默认行为。现在的autoscroll="false"设置在加载新视图时会保留滚动位置。但是autoscroll="true"会将新视图加载到顶部。这个解决方案对我来说非常有效。但当我使用浏览器的返回按钮加载上一个页面时，它也会滚动到顶部，因为autoscroll='true'。有什么解决办法吗？嗨，由于某种原因，这个autoscroll对我不起作用。我有一个ui-view，它加载了一个嵌套的ui-view（3个视图：header、content和footer）。当我进入一个重新加载内容视图并滚动到一半的状态，然后重新加载浏览器，它会自动滚动回到那个确切位置。我尝试了一切，甚至使用了$uiViewScroll(element)来创建一个scrollTop指令。没有什么效果。这真的让我发疯。我只想始终从屏幕顶部开始，但似乎无法绕过这个autoscroll功能。有人有解决办法吗？不可思议。我只能对自己说：RTF。我在autoscroll中没有使用表达式。我使用了autoscroll="false"而不是autoscroll=" 'false' "。很容易忽视。也许在代码中有什么方式可以捕捉到这种情况？如果是布尔值，将其转换为表达式。对我来说，autoscroll="true"和autoscroll="false"都不能实现我所需要的。如果我希望应用程序每次加载时都在窗口的顶部（而不是视图的顶部），不管他们在上一个视图中滚动到哪里，该怎么办呢？

0