1

我试图让一个 div 在页面加载时正确调整大小，并在 $(window).resize 上调整大小（但没有 jQuery）
我有两组代码可以工作：

此解决方案的第一个：angularJS 窗口调整大小问题

myapp.directive('resize', function($window) {
    return function(scope, element, attr) {
        var w = angular.element($window);
        w.on('resize', function() {
            var hh = document.getElementById('header').offsetHeight;
            var fh = document.getElementById('footer').offsetHeight;
            console.log('hh & fh', hh, fh);

            var tp = hh + 2;
            var bt = fh + 2;
            console.log('tp & bt', tp, bt);                

            var changes = {
                bottom: bt + 'px',
                top: tp + 'px',
            }
            element.css(changes);
            scope.$apply();
        });
    };
});

...在调整窗口大小时效果很好，但在初始加载/刷新时效果不佳

第二个使用链接属性

myapp.directive('contentsize', function($window) {
    return {
        restrict: 'A',
        scope:{},
        link:function (scope, element, attrs) {
            scope.$watch(function(){return $window.innerHeight;}, 
                function () {
                    var hh = document.getElementById('header').offsetHeight;
                    var fh = document.getElementById('footer').offsetHeight;
                    console.log('hh & fh', hh, fh);                    

                    var tp = hh + 2;
                    var bt = fh + 2;
                    console.log('tp & bt', tp, bt);                

                    var changes = {
                        bottom: bt + 'px',
                        top: tp + 'px',
                    }
                    element.css(changes);
                }, 
            true);
        }
    };
});

...在初始加载/刷新时效果很好，但在调整窗口大小时效果不佳

问题：
- 我如何让这些解决方案中的任何一个在初始加载和 window.resize 上工作
- 最佳解决方案是什么？（第一个解决方案表明 $watch 有不必要的开销）

jsFiddle 在这里http://jsfiddle.net/goredwards/012jsvrp/
（只需将 html 中的 'resize1' 换成 'resize2' 即可查看第二个'解决方案'）

PS div 之间的 2px 空间是故意的。

4

1 回答 1

2

为什么不直接在initand调用相同的函数resize呢？

myapp.directive('resize', function($window) {
    function updateUI(element) {
        var hh = document.getElementById('header').offsetHeight;
        var fh = document.getElementById('footer').offsetHeight;
        console.log('hh & fh', hh, fh);

        var tp = hh + 2;
        var bt = fh + 2;
        console.log('tp & bt', tp, bt);                

        var changes = {
            bottom: bt + 'px',
            top: tp + 'px',
        }
        element.css(changes);
    }

    return function(scope, element, attr) {
        var w = angular.element($window);

        updateUI(element);

        w.on('resize', function() {
            updateUI(element);
            scope.$apply();
        });
    };
});
于 2014-12-12T09:49:31.760 回答