angularjs target = _top

12 浏览
0 Comments

angularjs target = _top

我正在使用angularjs构建一个网站。

在页脚中有一些链接,链接到像angularjs网站中的其他页面那样的状态视图。

我面临的问题是,当我点击页脚链接时,视图会完美地改变/包含,但滚动条仍然保持在它的位置(显示页脚)。

我尝试在链接标签中使用target = "_top"属性,但它不起作用(尽管我不需要它,target = "_blank"完美地工作)。

请给我一个解决办法,当我点击网站上的任何链接时,我需要看到页眉(页面顶部)。

0
0 Comments

在AngularJS中,如果每次链接点击时需要加载不同的状态,可以在它们的主控制器中使用window.scrollTo(0, 0)来在状态加载时滚动到顶部。

然而,有时候在使用window.scrollTo(0, 0)时可能会出现问题。例如,当在一个iframe中使用target="_top"的链接时,滚动到顶部的代码可能无法正常工作。这是因为target="_top"会将链接的目标窗口设置为顶级窗口,而不是当前iframe中的窗口。

要解决这个问题,可以使用AngularJS的$anchorScroll服务。这个服务可以在页面中滚动到指定的锚点位置。

首先,在应用的配置中注入$locationProvider服务,并将html5Mode设置为true,以启用HTML5模式的URL:

$locationProvider.html5Mode(true);

然后,在主控制器中注入$anchorScroll服务,并在每次链接点击时调用$anchorScroll()方法:

app.controller('MainCtrl', function($scope, $anchorScroll) {
  $scope.scrollToTop = function() {
    $anchorScroll();
  }
});

最后,在链接中添加ng-click指令,并调用scrollToTop()方法:

Link

这样,无论链接的目标窗口是当前窗口还是顶级窗口,都可以通过调用$anchorScroll()方法来滚动到顶部。

0
0 Comments

问题的出现原因是使用了错误的属性值"target=_top",而正确的应该是"target=_blank"。

解决方法是将"target=_top"改为"target=_blank"。

0