Question

我的申请存在问题。我正在尝试构建一个都市风格的网络应用程序，到目前为止，我已经使用这一点sass使我的引导水平：

@import "variables";
@import "mixins";

// ---
// METRO.
// ---

@include screen-md {
    .metro {
        height: 100%;

        .container-fluid {
            width: 10000px;
            padding: 0 100px;
            position: absolute;
            top: 130px;
            bottom: 0;
            left: 0;

            .row-title {
                position: absolute;
                height: 100px;
            }

            > .row,
            .invisible-container > .row {
                position: relative;
                float: left;
                height: 780px;

                padding: 0 15px 30px 15px;
                margin-right: 50px;

                @include make-tiles($tile-width);

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .flex-column {
        display: -webkit-box; /* Safari */
        display: flex;

        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;

        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

如您所见，我将 .container-fluid 的宽度设置为10000px。我无法找到任何CSS方法来自动扩展。所以我试着创建一个可以为我做的指令：

.directive('containerFluid', ['$window', '$timeout', '$document', '$http', function ($window, $timeout, $document, $http) {

    var getChildrenWidths = function (children) {

        // Define our width
        var width = 0;

        // If we have any children
        if (children && children.length) {

            // For each child
            for (var i = 0; i < children.length; i++) {

                // Get our child
                var child = children[i];

                // If we are not the back button
                if (!angular.element(child).hasClass('back')) {

                    // Increase our width by the child width
                    width += child.offsetWidth;
                }
            }
        }

        // Return our width
        return width;
    };

    var resize = function (element, width) {

        // Get our document
        var body = angular.element($document[0].body)

        // If our window width is less than 992
        if (width < 992) {

            // Set our container width to 100%
            element.css('width', '100%');

        // Otherwise, if we are large than 992
        } else {

            // Reset our CSS so that widths are calulated properly
            element.css('width', '10000px');
            body.css('overflow-x', 'hidden');

            // Get our last childs length
            var style = window.getComputedStyle(element[0]),
                paddingRight = parseFloat(style.paddingRight),
                children = element.children(),
                lastChild = children[children.length - 1],
                data = lastChild.getBoundingClientRect(),
                containerWidth = data.right + paddingRight;

            //console.log(paddingRight);
            //console.log(lastChild);
            //console.log(data);
            //console.log(containerWidth);

            // Set our container width
            element.css('width', getChildrenWidths(children) + 'px');
            body.css('overflow-x', 'visible');
        }
    };

    return {
        restrict: 'C',
        link: function (scope, element) {

            // Get our window
            var window = angular.element($window),
            width = $window.innerWidth;

            // Bind to the resize function
            window.bind('resize', function () {

                // After half a second
                $timeout(function () {

                    // Get the window width
                    width = $window.innerWidth;

                    // Resize our container
                    resize(element, width);

                }, 1000);
            });

            // Watch for any children changes
            scope.$watch(function () {

                // If there are any changes to the children
                return $http.pendingRequests.length;

            // Execute if they change
            }, function (length) {

                // If we have no pending requests
                if (length === 0) {

                    // After half a second
                    $timeout(function () {

                        // Resize our container
                        resize(element, width);
                    }, 500);
                }
            });
        }
    }
}])

我可以通过两种方式执行这段代码，其中一种方法使用 getChildWidths 函数，该函数通过添加子宽度togeter来计算总宽度。然后是 getBoundingRect 方法，它允许我获取我的最后一个孩子并获得正确位置并添加容器 padding-right 达到那个价值。

如果没有HTTP请求，则两种方法都可以找到。问题是，有http请求，一旦执行了这些请求，它们就会被填充到容器的子容器中。因此，我试图在http请求长度上添加监视，并在没有请求时执行我的指令，但即使这样也无法正常工作，因为填充子项需要时间。我想避免使用超过500毫秒的超时，因为用户必须等待，这不是一件好事。

有谁知道如何解决这个问题？

AngularJS调整容器大小

0 个答案: