Angular:从DOM中选择元素

Angular: Selecting elements from DOM

本文关键字：选择 元素 DOM Angular      更新时间：2023-09-26

我使用ng-repeat来创建项目。我想确定使用函数创建的每个元素的高度。

我知道如何将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的元素，因此选择器不起作用。

我在这里错过了什么?

参考此处:http://codepen.io/squrler/pen/LxsfE?editors=101

编辑:

我想要的现在是不可能的。更多信息请访问:https://github.com/driftyco/ionic/issues/1691

编辑:在进一步观察之后，它似乎有点复杂。触发重复器的指令需要运行才能渲染lis，当li被渲染时(假设你把它移动到指令中)，它会触发指令来获取它的高度，但是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;
相关文章：