0

I have made a service in angular in that service requires accessing the dom properties of different elements, sample call of the service.

panelsService.collectClass(angular.element('.contact-panel-for-same-height'));

I did a console log at the service with this code, console.log('I want to get the offsetHeight of the element', classCollected); and tried accessing the classCollected.offsetHeight but it returns undefined. I found out that the classCollected is a group of html codes, and if I forEach classCollected i will see the actual html code, I was expecting to get an object to get the offset height. How do you access these properties with an html code returned?

Image for reference

Update: I can get the height using by adding [0] after classCollected, code will be classCollected[0].offsetHeight but the height that I am getting is not the actual height of my div. It is lesser.

Peter Anthony Duot
  • 13
  • 5
  • In my cases I used document.querySelector() to avoid using jQuery – Drag13 Jul 28 '17 at 10:33
  • @Vitalii, what is the difference between document.querySelector() and angular.element()? – Peter Anthony Duot Jul 28 '17 at 10:47
  • @Vitalii What does this have to do with jQuery?! – deceze Jul 28 '17 at 10:50
  • querySelector is a native browser's function. It returns exactly that you want - html element and do this quick and without third party libraries. angular.element is: If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite." – Drag13 Jul 28 '17 at 10:50
  • @deceze How do you access these properties with an html code returned? This is was answer what I am using and reason why I do not use common approach. – Drag13 Jul 28 '17 at 10:52
  • @Vitalii, i tried using `document.querySelector()`, it returns the actual html code, still the same values I received from `angular.element()`, except that angular.element stores the returned values in a **group/array**, while `document.querySelector` only return a **single instace**, it will **discard my previous value** when I call a new one. – Peter Anthony Duot Jul 29 '17 at 00:16
  • Thank you guys for responding, I already resolved this case, as what I've said above, I can access the height by adding `...[0].offsetHeight` but I receive a smaller height, so i used angulars `$timeout` to delay the execution of the code a bit. It works. It turns out I was receiving the height of the element during its initial stage, or something like that. – Peter Anthony Duot Jul 29 '17 at 01:07

0 Answers0