0

我为引导选项卡创建了一个指令，以显示选项卡并根据作为更改选择参数传入的 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>
4

2 回答 2

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>
于 2013-09-12T20:38:29.713 回答
0

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

为了快速测试，将 /tendencies 路径添加到路由提供程序并查看滚动是否不会发生。

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

希望有帮助

于 2013-09-11T01:27:08.560 回答