Question

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

以下是文件：

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>

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

第二个问题是范围变量＆＃34;宽度＆＃34;和＆＃34;身高＆＃34;在元素中无法访问：在下面的示例中，div＆＃34; bottom＆＃34;中没有任何内容。你如何让他们可以访问？

（在这里你可以认为CSS就足够了，但实际上我的应用程序有点复杂，下面的例子和CSS还不够）

非常感谢！

Answer 1

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

在指令＆amp;中添加以下方法从链接功能中删除scope.onResize();的直接调用

<强>代码

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

Answer 2

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

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

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

广告2）
请参阅this question, on how to modify scope from within a directive。

Angular指令自动调整元素大小

2 个答案: