I am working on creating a AngularJS site that DOES NOT use JQuery. In a directive, the values that are passed are
EngagementApp.directive('movingAside', function() {
return {
restrict : 'A',
link : function(scope, element, attributes) {
}
}
});
And html looks like:
<div class="aside" moving-aside>...Content...</div>
Doing things like element.clientHeight returns an undefined.
How can get the attributes(height, width, offset, etc) of the element without using JQuery and only AngularJS functions?
I am working on creating a AngularJS site that DOES NOT use JQuery. In a directive, the values that are passed are
EngagementApp.directive('movingAside', function() {
return {
restrict : 'A',
link : function(scope, element, attributes) {
}
}
});
And html looks like:
<div class="aside" moving-aside>...Content...</div>
Doing things like element.clientHeight returns an undefined.
How can get the attributes(height, width, offset, etc) of the element without using JQuery and only AngularJS functions?
Share Improve this question edited Sep 17, 2013 at 14:34 gdoron 150k59 gold badges302 silver badges371 bronze badges asked Sep 17, 2013 at 14:30 Devin DixonDevin Dixon 12.4k24 gold badges97 silver badges177 bronze badges 11- 3 When you are using angular you're using jQuery already(angularjs itself uses jQuery lite)... I hope I didn't ruin your mood for the day. – gdoron Commented Sep 17, 2013 at 14:33
- If I'm using JQLite, then why doesn't $(element) work? – Devin Dixon Commented Sep 17, 2013 at 14:38
- What exactly are you trying to do? bare in mind it's jQuery lite, so some functions are missing or it wasn't lite... – gdoron Commented Sep 17, 2013 at 14:40
- Get width, height and offset of the current element. – Devin Dixon Commented Sep 17, 2013 at 14:41
-
I meant how are you using
$(element)? – gdoron Commented Sep 17, 2013 at 14:41
2 Answers
Reset to default 14Use element[0].clientHeight | offsetHeight | scrollHeight
element[0] gives you access to the first DOM element in the JQLite selector collection while clientHeight is a built in property of the DOM element.
EngagementApp.directive('movingAside', function() {
return {
restrict : 'A',
link : function(scope, element, attributes) {
console.log(element[0].clientHeight);
}
}
});
There are 3 different heights you can get depending on what you're after:
- clientHeight
- offsetHeight
- scrollHeight
Try angular.element(element).css('height')