Question

我使用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的元素，因此选择器不起作用。

我在这里缺少什么？

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

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

Answer 1

编辑：进一步看后，似乎有点复杂。触发转发器的指令需要运行以便呈现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;

Angular：从DOM中选择元素

1 个答案: