Угловая директива, которая автоматически изменяет размеры элементов

Я создал директиву, которая автоматически изменяет размер элементов в соответствии с процентами окна. Но есть еще проблемы, которые я не могу решить.

Вот файлы:

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>

Первая проблема заключается в том, что когда я открываю веб-приложение, размеры не устанавливаются правильно: я должен изменить размер окна, чтобы оно заработало. Почему строка scope.onResize() в функции ссылки не все корректно инициализирует?

Вторая проблема заключается в том, что переменные области видимости "width" и "height" недоступны в элементе: в приведенном ниже примере в div "bottom" ничего нет. Как сделать их доступными?

(Здесь вы можете подумать, что CSS будет достаточно, однако на самом деле мое приложение немного сложнее, чем в приведенном ниже примере, и CSS недостаточно)

Большое спасибо!


angularjs angularjs-directive
person Nicolas K.    schedule 30.04.2015    source источник
comment
Во второй проблеме виновата изолированная область.   -  person Nicolas K.    schedule 04.05.2015

Ответы (2)


arrow_upward
0
arrow_downward

Объявление 1)
scope.onResize() не работает, потому что, когда вызывается функция link для директивы, элемент DOM, обрабатываемый этой директивой, еще не отображается (это будет после того, как директива будет сделана обработка). Попробуйте обернуть этот вызов в $timeout(), вот так:

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

Это приведет к вызову scope.onResize() во время следующего тика, то есть после завершения обработки директивы.

Объявление 2)
См. этот вопрос о том, как изменить область действия внутри директивы.

person npe    schedule 30.04.2015
comment
1) С функцией тайм-аута все точно так же: она изменяет размеры элементов, но не с соответствующей шириной/высотой. 2) Я думаю, что это не то же самое: мне нужно получить доступ к области, созданной моей директивой, а не к родительской области. - person Nicolas K.; 03.05.2015

arrow_upward
0
arrow_downward

Вам нужно вызвать метод scope.onResize(); из события загрузки элемента. Это было бы эффективно для начального запуска для настройки css элементов.

Добавьте метод ниже в директиву и удалите прямой вызов scope.onResize(); из функции ссылки

Код

 element.on('load', function() {
     scope.onResize();
 });
person Pankaj Parkar    schedule 30.04.2015
comment
Добавление этого кода в функцию ссылки не улучшает ее работу. Где вы предлагаете мне добавить это? - person Nicolas K.; 03.05.2015
comment
Функция ссылки @Niolak - единственное лучшее место для этого.. не удаляйте код.. добавьте эту дополнительную функцию] - person Pankaj Parkar; 03.05.2015