Watch an element for the min or/and max height then save it for use somewhere else
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
LICENSE
README.md
angular-track-height.js
bower.json
package.json

README.md

Angular Track Height

Watch an element for the min or/and max height then save it for use somewhere else

Mostly to avoid flicker on ui-view/ng-view when it changes height.

Install

Bower

$ bower install angular-track-height --save

NPM

$ npm install angular-track-height --save

Requires requestAnimationFrame

Usage

Directives

track-height

Tracks the height of an element for usage somewhere else, like inside a controller or inside other directives.

<div track-height="{{ ctrl.nameit }}" class="some-element" ui-view=""></div>

track-height-apply

You can set the min and max, depending on the options you pass to it.

By passing "min", the min-height will be set to the mininum value the element ever had (can be 0)

By passing "max", the min-height will be set to the max value the element ever had

By passing "min max", the height will be set to the max value the element ever had (might have problems with heavily responsive elements)

<div track-height="nameit" track-height-apply="min max" class="some-element" ui-view=""></div>

Service

TrackHeight

You can access your element height using this service, by the name you provide

.get

Gets the min or max height of an element

.set

Programatically sets the min or max height of an element

angular
.module('App', [
  'TrackHeight'
])
.controller('yourcontroller', ['TrackHeight', function(TrackHeight){
  var heights = TrackHeight.get('nameit');
  // heights.min / heights.max / heights.current;
  TrackHeight.set('nameit', {
    min: 10,
    max: 100,
    current: 50
  });
});

License

MIT