Setting height of an element in AngularJS when the controller executes

Question

I have a SPA written in AngularJS. In one of the controllers called 'XYZController', the height of a certain html element in corresponding view is being set as in code below.

The height is being set to 65% of viewport height.

Question: Is there another way of setting height dynamically in angularjs to satisfy the above requirement?

When using a simple html page with JavaScript, this approach of setting height is very normal, but even though it works in angular, I am thinking there might be another way of doing this in angularjs.

function XyzController($scope, $state, $mdSidenav) {

document.getElementById('mdc').style.height = 
          .65 * Math.max(document.documentElement.clientHeight, 
          window.innerHeight || 0) + 'px';
 }

JohnStrong · Accepted Answer · 2015-05-23 17:04:36Z

1

you could try this instead:

function XyzController($scope, $state, $mdSidenav) {
  $scope.height = .65 * Math.max(document.documentElement.clientHeight, 
      window.innerHeight || 0) + 'px';
}

and then in your template for the controller you could do something like:

<div id="mcd" style="height: {{height}}"></div>

answered May 23, 2015 at 17:04

JohnStrong

2181 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jcz · Accepted Answer · 2015-05-23 17:08:44Z

1

You should avoid doing DOM queries in angular, moreover you should avoid playing with DOM in controller, controllers job is to initiate the model and keep the state of the UI. When you want to manipulate an element, add children to it, change its attributes, attach even listeners etc., you place a directive on that element. The directive will get the element on which it resides as second argument in the link function:

var link = function (scope, element, attrs) { ... }

Link function should be your first choice for DOM "stuff", second choice is compile function.

If you ask specifically if angular has an api that let you change the style of an element, then the answer is that it provides the same (but truncated) api as JQuery does, so in the above case:

element.css('height', ...);

Also a choice is to just use the ng-style directive which gets an expression and evaluates it on every digest, so it will update elements style dynamically.

edited May 23, 2015 at 17:08

answered May 23, 2015 at 17:02

jcz

9032 gold badges9 silver badges17 bronze badges

3 Comments

Sunil Over a year ago

In the XyzController, how would I get the element whose height I need to set using your recommended approach? I know the id of the element is 'mdc'.

jcz Over a year ago

There is a dependency $element which you can inject into your controller just like you would do with $scope. The $element will reference the dom element on which the controller is sitting. So in your case if the Xyz controller is on the element with id mdc then you will get this element injected as $element. Another way (which avoids JQuery-like querying) is to put a directive on the element you want, and make that directive log itself onto the XyzController.

Sunil Over a year ago

Ok. I need to find a good link to read about this as its completely foreign to me. I love JavaScript and enjoy it, but angular is so different.

Collectives™ on Stack Overflow

Setting height of an element in AngularJS when the controller executes

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related