自动调整元素大小的 Angular 指令答案

【问题标题】：Angular directive which resizes elements automatically自动调整元素大小的 Angular 指令
【发布时间】：2015-04-30 17:55:27
【问题描述】：

我创建了一个指令，它使元素根据窗口的百分比自动调整大小。但仍有一些问题我无法解决。

这里是文件：

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>

第一个问题是，当我打开 web 应用程序时，大小无法正确初始化：我必须调整窗口大小才能使其正常工作。为什么链接函数中的scope.onResize() 行没有正确初始化所有内容？

第二个问题是在元素中无法访问范围变量“width”和“height”：在下面的示例中，div“bottom”中没有任何内容。如何让它们可访问？

（在这里你可能认为 CSS 就足够了，但实际上我的应用比下面的示例要复杂一些，CSS 还不够）

非常感谢！

【问题讨论】：

对于第二个问题，孤立的作用域是罪魁祸首。

标签： angularjs angularjs-directive

【解决方案1】：

广告 1)
scope.onResize() 不起作用，因为当调用指令上的 link 函数时，该指令处理的 DOM 元素尚未呈现（一旦指令完成处理，它将呈现）。尝试将调用封装在 $timeout() 中，如下所示：

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

这将导致在指令完成处理之后的下一个滴答声期间调用scope.onResize()。

广告 2)
见this question, on how to modify scope from within a directive。

【讨论】：

1) 使用 timeout 功能，它完全一样：它调整元素的大小，但没有适当的宽度/高度。 2）我认为不一样：我需要访问我的指令创建的范围，而不是父范围。

【解决方案2】：

您需要从元素的加载事件中调用 scope.onResize(); 方法，这对于设置元素的 css 初始启动将是有效的

在指令中添加以下方法并从链接函数中删除scope.onResize();的直接调用

代码

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

【讨论】：

在链接函数中添加此代码并不能使其更好地工作。你建议我必须在哪里添加它？
@Niolak 链接函数是唯一更好的地方。不要删除任何代码。添加这个额外的功能]