CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Super Babaca
Super Babaca

Reputation: 1655

initial window size/resize catching

Having a function that looks after window height change and sets a new value for the element(Quite complicated - adds/updates a scroll if too high, and stays of a fixed height if it not high enough). It works well when I resize a window, but not in the start. So, here is the question: how to make it work right after load?

angular.module('main')
    .directive('blablaRightColumnViewPort', ['$window',
        function($window, $timeout) {

            var directive = {};
            directive.restrict = 'A';

            directive.compile = function( element, attributes ) {

                // DOM references
                var w = angular.element($window),...
                    maxHeight = 0;

                function fitScroll() {
                    // count max height available
                    maxHeight = ...; 

                    // compare an original size of the content to max available 
                    if ( originalElementHeight > maxHeight ) {
                        element.height( maxHeight );   
                    } else {
                        element.height( originalElementHeight );
                    }
                }

                return function( scope, element, attributes ) {

                    // watch it!
                    scope.$watch( function() {
                        return w.height();
                    }, function(){
                        ...
                        fitScroll();

                    } );

                    // assign the event
                    w.bind('resize', function() {
                        scope.$apply();
                    });
                }
            }

            return directive;
        }
    ]);

I tried to use in compile:

                $timeout(function(){
                    w.resize();
                }, 0);

and in link:

                $timeout(function(){
                    scope.$apply();
                }, 0);

Didn't work at all... puzzled, frustrated.

Upvotes: 0

Views: 88

Answers (1)

hon2a
hon2a

Reputation: 7214

I'd suggest avoiding the performance-hurting "watch function's return value" pattern alltogether. Why not just bind to the resize event and also trigger the function initially?

fitScroll();
angular.element($window).$on('resize', function () {
    scope.$apply(fitScroll);
});

Upvotes: 1

Related Questions