Angular：從DOM中選擇元素

我正在使用ng-repeat來創建項目。我想確定使用函數創建的每個元素的高度。Angular：從DOM中選擇元素

我知道如何將由ng-repeat創建的元素的索引傳遞給應該確定高度的函數，但是我在實際選擇該項目時遇到困難。

這是我使用的是什麼現在：

$scope.getItemHeight = function(index) { // index is index of element in ng-repeat 
    var itemHeight = angular.element('li').eq('+index+').offsetHeight; 
    return itemHeight; 
    };

但是，這並不因錯誤工作：Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

我也試過：

$scope.getItemHeight = function(index) { 
    var itemHeight = document.querySelectorAll('ul:nth-child('+index+')'); 
    return itemHeight; 
    };

這將返回一個元素長度爲0，所以選擇器不起作用。

我在這裏錯過了什麼？

Codepen這裏：http://codepen.io/squrler/pen/LxsfE?editors=101

編輯： 我想什麼是不可能在這個時候。更多的信息在這裏：https://github.com/driftyco/ionic/issues/1691

來源

2014-06-27 Squrler

唐你不想要「李」嗎？我想你會想'document.querySelectorAll（'ul> li：nth-child（'+ index +'）'）;' – Ian

啊，對不起，錯字，你說得對，我正在尋找李。但不幸的是，它仍然返回一個長度爲0的元素。:( – Squrler

你不應該在指令中做任何DOM計算/操作嗎？這應該真正從控制器中抽象出來。 – Mark

編輯：在進一步看這個後，它似乎有點複雜。正在渲染li的指令需要運行，以便呈現lis（假設您將其移至指令），它會觸發指令以獲取其高度，但li和它的相應數據是尚未完全呈現，因此沒有高度。如果您使用超時等待渲染，則轉發器將在超時等待時繼續渲染而不顯示有效的高度數據。所以看起來你有一個難題。您可以嘗試使用http://binarymuse.github.io/ngInfiniteScroll/或類似的東西。

這應該放在一個指令中，這個指令可以讓你在呈現的時候方便地訪問li。

喜歡的東西：

.directive('getHeight', ['$filter', function ($filter) { 
    'use strict'; 

    return { 
     restrict: 'A', 
     scope: true, 
     link: function (scope, element, attrs) { 
      var li = element[0]; 
      var height = li.offsetHeight; 
      console.log('Height': height) 
     } 
    }; 
}]);

不知道你正在尋找做的高度，一旦你擁有它......

否則，你可以去什麼：

var ul=document.getElementsByTagName('ul')[0]; 
var li=ul.getElementsByTagName('li')[index]; 
var height=li.offsetHeight;

來源

2014-06-27 15:08:41

謝謝，會試試這個。爲什麼我需要這個身高，請查看我對Marks對我的問題的評論。 – Squrler

更新了Codepen：您的第二個建議由於某種原因未選擇li元素。 – Squrler

這是因爲，因爲它是一箇中繼器，li還沒有被渲染。直到它所綁定的數據存在纔會存在。你會看到，如果你把一秒鐘左右的setTimout，李將被選中。 –

Angular：從DOM中選擇元素

回答

相關問題