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

我爲引導選項卡創建了一個指令，以顯示選項卡並根據作爲變更選擇參數傳入的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>

來源

2013-08-17 anazimok

我最終加入風格的標籤內容股利。這可以防止調整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-12 20:38:29 anazimok

你有映射到一個模板/傾向路徑？如果沒有，那麼ng-view會在您點擊標籤時刪除t1.html的內容，這會強制瀏覽器降低頁面高度，並可能導致您認爲它正在滾動到頂部。

要進行快速測試，請向路由提供程序添加/傾向路徑並查看滾動是否未發生。

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

希望幫助

來源

2013-09-11 01:27:08 hatim

是我做，我提取和修飾，這就是爲什麼例如沒有它的代碼。 – anazimok

您是否能夠通過更簡單的設置（最低限度，不使用bootstrap.js）來重現問題？我假設這個問題不是瀏覽器特定的。 – hatim

我添加了github repo https://github.com/anazimok/angular-test-app。我會盡力在那裏重現它。 – anazimok

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

回答

相關問題