使用$ location和$ anchorScroll將表格行滾動到視圖中

我試圖使用$ anchorScroll向下滾動頁面以確保顯示一行表格。我已閱讀了大部分關於$ anchorScroll的SO線程和文檔。據我所知，我正確使用它。我已經通過Firebug的代碼，看來我使用的元素ID是正確的。

當我執行應該更改滾動位置的函數時，它確實會更改滾動位置，但它只是向上滾動，一直移動到頂部。我想要滾動到的「目標」元素位於執行該函數的頁面的下方。

沒有錯誤信息，它只是沒有做我所需要的。

這裏是我用簡單的函數：

$scope.scrollTo = function (elementId) { 
     console.log("element[" + angular.element(elementId) + "]"); 
     $location.hash(elementId); 
     $timeout(function() { 
      $anchorScroll(); 
     }); 
    };

我也試圖改變提及這一點，以便代替靶向錶行，它的目標手風琴DIV包圍表，但這沒有什麼區別。它仍然跳轉到頁面的頂部。

請注意，在我調用「scrollTo」之前，我首先確保打開了與表的手風琴。無論如何，即使在手動打開後，它仍然不能正確滾動。

更新：

下面是我試圖滾動到的HTML部分：

   <div ng-controller="WorkflowDefsCtrl"> 
       <pane accordion-group heading="Workflows" is-open="accordionActiveFlags.workflowDefs" id="workflowDefs"> 
        <label for="workflowDefsTable">Workflow Definitions</label> 
        <table id="workflowDefsTable" ng-table class="table"> 
         <tr ng-repeat="workflowDef in sunlightConfig.workflowDefinitions | orderBy: workflowDef.order" id="workflowDef{{workflowDef.id}}"> 
          <td data-title="'ID'">{{workflowDef.id}}</td> 
          <td data-title="'Name'">{{workflowDef.name}}</td> 
          <td data-title="'Label'">{{workflowDef.label}}</td> 
          <td data-title="'Order'" class="text-right">{{workflowDef.order}}</td> 
          <td data-title="'Render?'">{{workflowDef.render}}</td> 
          <td data-title="'Query Fragment'">{{workflowDef.queryFragment}}</td> 
          <td data-title="'Query Order'" class="text-right">{{workflowDef.queryOrder}}</td> 
         </tr> 
        </table> 
       </pane> 
      </div>

兩個測試用例我試圖要去元素「workflowDefs」任何「workflowDef {{workflowDef.id}}」元素。

更新：

我提高了我的「scrollTo」的方法來處理滾動元素剛剛成爲可見。但是，這並沒有什麼區別。無論如何，它仍然只是滾動到頂部。

更新：

今天，我意識到，一個字符串參數「angular.element」應該是一個CSS選擇器，而不是元素的ID，所以我不得不加上「＃」作爲前綴。這導致正確的元素被定位，但不幸的是它仍然對顯示沒有影響。它仍然不滾動到元素。

我的新「scrollTo」功能如下：

scrollTo: function (elementId) { 
     $location.hash("#" + elementId); 
     $timeout(function() { 
      $anchorScroll(); 
     }); 
    },

來源

2014-02-19 David M. Karr

你能分享一些你的HTML嗎？我犯了使用的錯誤，但它期望，因此請檢查您是否有一個錨點標記，其ID設置爲元素ID中的內容。 –

我沒有滾動到一個錨標籤（$ anchorScroll似乎不在乎），但我使用「id」，你可以從更新中看到。 –

源代碼當然看起來像它特別針對錨標籤。它被命名爲「錨點」，源代碼查找類型爲「a」的標籤https://github.com/angular/angular.js/blob/master/src/ng/anchorScroll.js –

我設法想出解決辦法。我正確地認爲$ anchorScroll必須在$ timeout塊中執行，但這還不夠。對$ location.hash（）的調用也必須位於$ timeout塊中。一旦我將「scrollTo」功能更改爲以下內容：

scrollTo: function (elementId) { 
     $timeout(function() { 
      $location.hash(elementId); 
      $anchorScroll(); 
     }); 
    },

然後，它開始始終如一地工作。

來源

2014-02-27 21:10:57

這個工程，你應該接受你自己的答案！ :) – leonziyo

嘗試相同。沒有爲我工作 –

我已經嘗試，但沒有爲我工作 –

當狀態發生變化時& $location.hash()不爲空，則在導航頁面內滾動到所需的哈希id元素。$ timeout將確保滾動到散列ID塊，在頁面正確加載後完成。

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { 
    if ($location.hash()) { 
     $timeout(function() { 
      var hashId = $location.hash(); 
      $anchorScroll(); 
      document.getElementById(hashId).focus(); 
     }); 
    } 
});

來源

2015-12-02 08:01:01

不是$ anchorScroll（）的全部用途，您不必使用.focus（）？ – smorhaim

使用$ location和$ anchorScroll將表格行滾動到視圖中

回答

相關問題