Question

我有DOM元素，id={{child.id}}container

 <div id={{child.id}}container layout="column" flex layout-align="start center" class='container' dragula='"first-bag"' ng-init="vm.getAssociatedWorkItems(child.id); vm.getElementHeight(child.id+'container');">
    <div layout="column" class="md-whiteframe-5dp capitalize itemsInList" ng-repeat="item in vm.items | filter:search" id={{item.id}}child>
        <div class="workItemName">{{vm.getWorkItemName(item.metadata)}}</div>
        <div class="workItemDescription">{{vm.getWorkItemDescription(item.metadata)}}</div>
    </div>
</div>

我希望获得此元素的高度，并根据高度deside来列出ng-repeat中的项目。如何在DOMs中获得angularjs身高？

Answer 1

使用angular built-int jqlite和angular.element（）：

angular.element(".myDiv")[0].offsetHeight;

注意：不要使用DOM操作污染控制器。这是一种不好的做法，您应该在指令中执行此类操作。

编辑1

OP在我的建议之后使用了这个方式：

var element = angular.element(document.querySelector('#id')); 
var height = element[0].offsetHeight;

Answer 2

在 angularjs 中，建议将DOM元素操作为directives.Into指令，我们也使用jquery。因此，您添加了＆＃39; my-directive ＆＃39;将名称命名为元素，如下所示：

<div my-directive id={{child.id}}container layout="column" flex layout-align="start center" class='container' dragula='"first-bag"' ng-init="vm.getAssociatedWorkItems(child.id); vm.getElementHeight(child.id+'container');">
    <div layout="column" class="md-whiteframe-5dp capitalize itemsInList" ng-repeat="item in vm.items | filter:search" id={{item.id}}child>
        <div class="workItemName">{{vm.getWorkItemName(item.metadata)}}</div>
        <div class="workItemDescription">{{vm.getWorkItemDescription(item.metadata)}}</div>
    </div>
</div>

进入js，创建获取高度的指令：

.directive('myDirective', function () {
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {
            var elementHeight = element.height();
            console.log(elementHeight);
        }
    }
})

Answer 3

您应该使用angular的$ element服务，它是组件/指令的jqLite包装器。在控制器中尝试类似的东西：

controller: function($element) {
angular.foreach(
    $element.find('.md-whiteframe-5dp, .capitalize, .itemsInList')
        .children(), function(element){
            var el = angular.element(element);
            if(el.hasClass('workItemName')){
                // do something with workItemName DOM element
            }
            if(el.hasClass('workItemDescription')){
                // do something with workItemDescription DOM element
            }
        });

如何获得angularjs中元素的高度

3 个答案:

编辑1

进入js，创建获取高度的指令：