Javascript 如何在angularjs中获取元素的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39891593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get height of element in angularjs
提问by Serhiy
I have DOMelement,with id={{child.id}}container
我有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>
I want to get height of this element, and according to height deside to list items in ng-repeator not. How to get DOMsheight in angularjs?
我想获得这个元素的高度，并根据高度来列出ng-repeat或不列出项目。如何获得DOMs身高angularjs？
回答by Luxor001
Use angular built-int jqlite with angular.element():
将 angular 内置的 jqlite 与 angular.element() 一起使用：
angular.element(".myDiv")[0].offsetHeight;
Beware: don't pollute your controller with DOM manipulation. It's a bad practise and you should do this kind of operations in directives.
注意：不要用 DOM 操作污染你的控制器。这是一种不好的做法，您应该在指令中执行此类操作。
Edit 1
编辑 1
OP used this mid way after my suggestion:
在我的建议之后，OP 使用了这种方式：
var element = angular.element(document.querySelector('#id'));
var height = element[0].offsetHeight;
回答by Theo Itzaris
in angularjsit is advised to manipulate the DOM elements ,into directives.Into directives we also use jquery. So, you add the 'my-directive' name into the element, like so:
在angularjs 中，建议将 DOM 元素操作为指令。进入指令我们也使用 jquery。因此，您将“ my-directive”名称添加到元素中，如下所示：
<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>
Into js, you create the directive that gets the height:
在 js 中，您创建获取高度的指令：
.directive('myDirective', function () {
return {
restrict: 'AE',
link: function (scope, element, attrs) {
var elementHeight = element.height();
console.log(elementHeight);
}
}
})
回答by Adam Nagy
You should use angular's $element service, which is a jqLite wrapper for your component/directive. Try something similar in your controller:
您应该使用 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
}
});
