AngularJS: Better way to watch for height change

by

This works by registering a watcher in emHeightSource which is called every $digest. It updates the __height property which is in turn watched in emHeightTarget:

/*
 * Get notified when height changes and change margin-top
 */
.directive( 'emHeightTarget', function() {
    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( '__height', function( newHeight, oldHeight ) {
                elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' );
            } );
        }
    }
} )

/*
 * Checks every $digest for height changes
 */
.directive( 'emHeightSource', function() {

    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( function() {
                scope.__height = elem.height();
            } );
        }
    }

} )

More Related Contents:

  1. CSS: Change parent on focus of child
  2. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  3. How to hide css and js version details from weppalyzer in PHP
  4. How to make page loaders/animations/transitions
  5. Replacing css file on the fly (and apply the new style to the page)
  6. Textarea Auto height [duplicate]
  7. Losing scope when using ng-include
  8. How to change CSS property using JavaScript
  9. Relative Paths in Javascript in an external file
  10. Dynamically loading css stylesheet doesn’t work on IE
  11. AngularJS – ng-disabled not working for Anchor tag
  12. Is it possible to dynamically scale text size based on browser width?
  13. Responsive horizontal page sliding
  14. Need to find height of hidden div on page (set to display:none)
  15. How to build simple tabs with jQuery?
  16. Blur Img’s & Div’s in HTML using CSS
  17. What are the possible ways to hide an element via CSS [closed]
  18. Google Maps API v3: InfoWindow not sizing correctly
  19. What are some good ways to prevent people from copying my source code? [closed]
  20. Add CSS to with JavaScript?
  21. Scroll Position of div with “overflow: auto”
  22. Styling Vuetify selectors
  23. angularjs custom filter to check for values inside a data array
  24. Placeholder for contenteditable div
  25. Setting the height of a DIV dynamically
  26. assign color to mouse cursor using CSS
  27. Center an Image vertically and horizontally using CSS
  28. Change background on button click, using CSS only? [duplicate]
  29. Jquery/Javascript Opacity animation with scroll
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment