Using AngularJS dependency inside a template

Question

I would like to set the max-height of a div to be $window.innerHeight. The following code fails:

<div ng-style="{'max-height': $window.innerHeight}" style="overflow-y: auto">

My walk-around was to use a scope variable:

$scope.divnHeight = $window.innerHeight;
<div ng-style="{'max-height': divHeight}" style="overflow-y: auto">

Is there any way to achieve a ng-style to $window binding?

Thanks

can you create a plunker with an example of your code? you can fork this for easy setup: plnkr.co/edit/eqKz9wgyzm8LOz6pZAN0?p=info — SoluableNonagon
– SoluableNonagon, Commented Sep 10, 2014 at 15:34
You're missing 'px' in the ng-style, just noticed, see my answer below with a link to the plunker — SoluableNonagon
– SoluableNonagon, Commented Sep 10, 2014 at 15:42

SoluableNonagon · Accepted Answer · 2014-09-10 15:41:55Z

1

You're missing 'px' in the ng-style

See Plunker: http://plnkr.co/edit/eqKz9wgyzm8LOz6pZAN0?p=preview

To answer your question, no... any variable you wish to use in HTML must be a scope variable.

If the window height is changing, then you can use a watcher to bind the variable to the window height:

$scope.$watch(function(){
   return $window.innerHeight; // the thing to watch
}, function(newValue, oldValue) { // the function to run when the value changes
   console.log(newValue);
   $scope.divnHeight = $window.innerHeight;
});

Update:

try adding this into your controller, this just registers a function to fire when you resize:

window.onresize = function(event) {
    console.log("Fire resize");
    $scope.divnHeight = $window.innerHeight;
};

Also, the size may stay the same because you are using max-height rather than height, in which case the height depends on the content, try using height and see if that makes a difference:

<div ng-style="{'height': divHeight + 'px'}" style="overflow-y: auto">

edited Sep 10, 2014 at 15:41

answered Sep 10, 2014 at 15:01

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

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

2 Comments

Michael Over a year ago

Thanks EliteOctagon! On my chrome browser, this code is executed only once, even when changing the window size... So that this solution is no better than my original solution.

SoluableNonagon Over a year ago

@Michael, you need to use to mention the unit of measure when defining the height, in this case it would be pixels

Collectives™ on Stack Overflow

Using AngularJS dependency inside a template

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related