javascript - 在 AngularJS 中不使用指令获取元素属性(高度/宽度)

Question

在 angularJS 中，我们可以使用指令来访问元素，我们可以使用这些指令设置属性。我想在不使用指令的情况下获取/设置 DOM 元素的一些属性。

<div class=main ng-app="myApp" ng-controller="SalesController">
    <div class=ele1> </div>
    <div class=ele2> </div>
    <div class=ele3></div>
</div>

有些地方我想对一​​些元素的高度做一些计算:

var myApp = angular.module('myApp', []);
myApp.controller('SalesController',function($scope){
    //this code not working
    document.getElementsByClassName("ele1").clientHeight;
});  

我知道如何使用指令获取高度，但在某些情况下我们需要元素不同部分的 div 元素的高度/宽度，每次添加指令都会增加代码。

是否有一种单行方法可以在 angularjs 中查找 div 的高度/宽度(如 jquery 中的 $("classname").height())？我宁愿在不使用 jQuery 的情况下这样做。

Answer 1

您可以使用 JavaScript 循环查找 DOM 元素的高度/宽度。

示例:

var myApp = angular.module('myApp', []);
myApp.controller('SalesController',function($scope){
  var objects = document.getElementsByClassName('YOUR_CLASS_NAME');
  var height = 0;
  for(var i=0;i<objects.length;i++){
    height = objects[i].clientHeight;
    console.log(height); /*Output in JS console*/
    alert(height); /*Output in window alert Box*/
  }
});

注意: document.getElementsByClassName() 函数返回对象数组。

document.getElementById() 返回单个对象。您不能在对象数组选择器中直接使用 clientHeight 属性。因为 clientHeight 是单个对象属性。

一些其他的 JavaScript DOM 选择器函数

document.getElementById() /*Return single Object*/
document.getElementsByTagName() /*Return Object Array*/
document.getElementsByTagNameNS()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()
....