Angular directive which resizes elements automatically

Question

I created a directive which makes elements resize automatically according to percents of window. But there are still problems I can't solve.

Here are the files:

autoresize.js:

angular.module('autoresize', [])

    .directive('autoresize', function() { return {

        scope:{theId:'@id', theClass:'@class', wFactor:'@w', hFactor:'@h'},
        link: function(scope, elem, attrs) {

            scope.onResize = function() {
                if(scope.hFactor != 'w')
                {
                    scope.height = Math.floor($(window).innerHeight()*scope.hFactor);
                }
                if(scope.wFactor != 'h')
                {
                    scope.width = Math.floor($(window).innerWidth()*scope.wFactor);
                }
                if(scope.hFactor == 'w')
                {
                    scope.height = scope.width;
                }
                if(scope.wFactor == 'h')
                {
                    scope.width = scope.height;
                }

                $(elem).outerHeight(scope.height);
                $(elem).outerWidth(scope.width);
            }
            scope.onResize();

            angular.element($(window)).bind('resize', function() {
                scope.onResize();
            });
        }
    }
});

test.htm:

<!DOCTYPE html>
<html>

    <head>
        <title>Test</title>
        <style type="text/css">
*
{
    box-sizing: border-box;
}

html, body
{
    margin: 0;
    padding: 0;
}

#left, #right
{
    display: inline-block;
}

#left
{
    background: #101010;
}

#right
{
    background: #777777;
}

#bottom
{
    background: #AAAAAA;
}
        </style>
    </head>

    <body>

        <div ng-app="testApp" ng-controller="testCtrl">
            <div id="content">
                <div id="left" autoresize w="0.5" h="0.8"></div><div id="right" autoresize w="0.5" h="0.8"></div>
                <div id="bottom" autoresize w="1" h="0.2">{{width}}</div>
            </div>

        </div>

        <script src="vendor/angular.min.js"></script>
        <script src="vendor/jquery-2.1.3.min.js"></script>

        <script src="autoresize.js"></script>
        <script>
angular.module('testApp', ['autoresize'])

    .controller('testCtrl', function($scope, $http) {



});
        </script>

    </body>
</html>

The first problem is that when I open the webapp, the sizes don't init correctly: I must resize the window to get it work. Why doesn't the line scope.onResize() in the link function init everything correctly?

The second problem is that the scope variables "width" and "height" are not accessible in the element: in the example below, there isn't anything in the div "bottom". How do you get them accessible?

(Here you could think that CSS would be sufficient, however actually my app is a bit more complicated that the example below and CSS isn't sufficient)

Thanks a lot!

For the second problem, the isolated scope was the culprit. – Nicolas K. May 04 '15 at 16:32 — Nicolas K., May 04 '15 at 16:32

score 0 · Answer 1 · answered Apr 30 '15 at 18:04

0

You need call you scope.onResize(); method from load event of element, That would be efficient to initial kick off for setting css of elements

Add below method in directive & remove direct call of scope.onResize(); from link function

Code

 element.on('load', function() {
     scope.onResize();
 });

answered Apr 30 '15 at 18:04

Pankaj Parkar

134,766
23
234
299

Adding this code in the link function doesn't make it work better. Where do you suggest I must add it? – Nicolas K. May 03 '15 at 10:28
@Niolak link function is the only better place for it..don't remove any code..add this extra fucntion] – Pankaj Parkar May 03 '15 at 10:33

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Ad 1)
The scope.onResize() does not work, because when the link function on a directive is called, the DOM element handled by that directive is not yet rendered (it will be, once the directive is done processing). Try to wrap that call in $timeout(), like this:

$timeout(function() { scope.onResize(); });

This will cause calling scope.onResize() during the next tick, which is after the directive finishes processing.

Ad 2)
See this question, on how to modify scope from within a directive.

edited May 23 '17 at 11:50

Community

1
1

answered Apr 30 '15 at 18:06

npe

15,395
1
56
55

1) With the timeout function, it's exactly the same: it resizes elements but not with the appropriate width/height. 2) I think it's not the same: I need to access the scope created by my directive, not the parent scope. – Nicolas K. May 03 '15 at 10:31

Angular directive which resizes elements automatically

2 Answers2