Question

具有一个监视窗口高度变化的函数并为元素设置一个新值（非常复杂 - 如果太高则添加/更新滚动，如果不够高则保持固定高度）。我调整窗口大小时效果很好，但不是在开始时。所以，问题是：如何在加载后立即使其工作？

angular.module('main')
    .directive('blablaRightColumnViewPort', ['$window',
        function($window, $timeout) {

            var directive = {};
            directive.restrict = 'A';

            directive.compile = function( element, attributes ) {

                // DOM references
                var w = angular.element($window),...
                    maxHeight = 0;

                function fitScroll() {
                    // count max height available
                    maxHeight = ...; 

                    // compare an original size of the content to max available 
                    if ( originalElementHeight > maxHeight ) {
                        element.height( maxHeight );   
                    } else {
                        element.height( originalElementHeight );
                    }
                }

                return function( scope, element, attributes ) {

                    // watch it!
                    scope.$watch( function() {
                        return w.height();
                    }, function(){
                        ...
                        fitScroll();

                    } );

                    // assign the event
                    w.bind('resize', function() {
                        scope.$apply();
                    });
                }
            }

            return directive;
        }
    ]);

我尝试在编译中使用：

                $timeout(function(){
                    w.resize();
                }, 0);

并在链接中：

                $timeout(function(){
                    scope.$apply();
                }, 0);

根本没有工作......困惑，沮丧。

Answer 1

我建议避免表现伤害＆＃34;观看功能的回报值＆＃34;一共模式。为什么不绑定到resize事件并最初触发该函数？

fitScroll();
angular.element($window).$on('resize', function () {
    scope.$apply(fitScroll);
});

初始窗口大小/调整大小

1 个答案: