Skip to content

Instantly share code, notes, and snippets.

@thesamet
Created December 23, 2013 21:24
Show Gist options
  • Save thesamet/8104952 to your computer and use it in GitHub Desktop.
Save thesamet/8104952 to your computer and use it in GitHub Desktop.
Angular directive that notifies when it detects element size change.
// Calls a function when a change in an element size is detected.
// Uses polling, since there is currently no way to detect resize
// events with CSS flow (without resorting to JQuery UI Resize)
.directive('taOnResize', function($interval) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var oldWidth = undefined;
var oldHeight = undefined;
var stop = $interval(function() {
var width = element.width();
var height = element.height();
if ((width !== oldWidth) || (height !== oldHeight)) {
oldWidth = width;
oldHeight = height;
scope.$eval(attrs.taOnResize);
}
}, 500);
scope.$on('$destroy', function() {
if (angular.isDefined(stop)) {
$interval.cancel(stop);
console.log('destroy');
}
stop = undefined;
});
}
};
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment