Question

我为bootstrap选项卡创建了一个指令，以显示选项卡，并根据作为change-selection参数传入的url切换路由。

每次单击选项卡时，视图都会加载，整个页面会滚动到顶部。我试图禁用页面滚动，但无论我尝试什么，我都无法让它工作。

非常感谢任何帮助。

JS代码：

var reportApp = angular.module('reportApp', [])
//Disable anchorScroll
.value('$anchorScroll', angular.noop)
.config(
  ['$routeProvider', function ($routeProvider) {
      $routeProvider.when("/", {
        templateUrl: "t1.html",
        controller: 'T1Ctrl'}
      )
      ...
 }

//Directive to switch tab
reportApp.directive('changeSelection', function ($location) {
        return function (scope, element, attr) {
            element.bind('click', function (e) {
                e.preventDefault();
                $(element).tab('show');
                $location.path(attr.changeSelection);
                scope.$apply();
            });
        }
    }
);

HTML：

<div id="tabContainer" class="span12">
    <ul class="nav nav-tabs" id="reportTabs">
        <li class="active"><a href="#" change-selection="/tendencies">Tab2</a></li>
    </ul>
</div>
<div class="tab-content">
    <div data-ng-view></div>
</div>

Answer 1

我最终在标签内容div中添加了样式。这可以防止调整div和浏览器刷新的大小。所以它毕竟与angularjs无关。

更改自：

<div class="tab-content">
    <div data-ng-view></div>
</div>

为：

<div class="tab-content" style="min-height: 500px">
    <div data-ng-view></div>
</div>

Answer 2

您是否将/趋势路径映射到模板？如果没有，那么当您单击选项卡时，ng-view将删除t1.html的内容，这会强制浏览器降低页面高度，并可能导致您认为它滚动到顶部。

要进行快速测试，请将/趋势路径添加到路由提供程序，并查看是否未进行滚动。

$routeProvider.when("/", {
    templateUrl: "t1.html",
    controller: 'T1Ctrl'}
  ).when("/tendencies", {
    templateUrl: "t1.html"});

希望有所帮助

如何在angularjs ng-view中禁用$ anchorScroll

2 个答案: