Question

我有一个需要固定在屏幕底部的div，但必须与滚动过去的内容的宽度相同。这是我正在谈论的图片：

将div的宽度设置为屏幕尺寸的百分比的问题在于，有一个sidenav（未显示，但左侧的灰色区域表示水平位置;它位于图像顶部上方）隐藏当屏幕尺寸太小而无法显示它和mdCards时。因此，当隐藏它时，每个mdCard占据屏幕的大部分比没有隐藏时更大，并且所有这些都是由角度处理的，因为这些元素是角度内置的。然而，我的固定div（它实际上也是一个mdCard，但这是无关紧要的......也许）显然没有以这种方式调整大小。所以我需要一种方法使其宽度始终与其兄弟的宽度相同。我的模板看起来像这样：

OptParam

他们的风格看起来像这样：

<!-- content container -->
<div>
    <!-- bunch of mdCards -->
    <md-card class="searchResult">
        <!-- This one is guaranteed to exist -->
    </md-card>
    <md-card class="searchResult" ng-repeat="result in searchResults track by $index">
        <!-- These are not -->
    </md-card>

    <!-- my fixed div -->
    <md-card id="totals" ix-totalbar>
    </md-card>
</div>

到目前为止，我已经尝试使用一个名为ixTotalbar的指令执行此操作，但它无法正常工作，我尝试在评论中添加所有内容，但没有一个正确调整大小。

.searchResult{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#totalsbar{
    position: fixed;
    bottom: 55px;
}

有趣的是你可以看到一些namespace incode.directives.label { interface IScope extends ng.IScope { } export class IncodeTotalsBarDirective implements ng.IDirective { restrict = 'AE'; public require: 'ngModel'; public scope: Object; replace = true; public link: ng.IDirectiveLinkFn | ng.IDirectivePrePost; constructor() { this.link = (scope: IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctlr: any) => { element.bind('load', () => { element.css({ width: element.siblings()[0].offsetWidth }); window.addEventListener('resize', () => { console.log("window resized"); element.css({ width: element.siblings()[0].offsetWidth }); }); element.siblings()[0].on('resize', () => { console.log("element resized"); element.css({ width: element.siblings()[0].offsetWidth }); }); }); console.log("Element width: "+element.width().toString() + " Sibling Style: "+element.siblings()[0].style.toString()); } } public static factory(): ng.IDirectiveFactory { var directive = () => new IncodeTotalsBarDirective(); //directive.$inject = ['$window']; return directive; } } angular.module('incode.module') .directive('ixTotalbar', incode.directives.label.IncodeTotalsBarDirective.factory()); }，其中一个输出是兄弟姐妹的风格，我已经验证是正确的。但是，宽度没有正确设置，所以我不明白我需要做什么。

Answer 1

可能与您正在寻找的相似，但这是AngularJS 1.由于您的评论说了什么，这里是：

JS：

app.directive('bindToHeight', function ($window, $parse) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var attributes = scope.$eval(attrs['bindToHeight']);
            var targetElem = angular.element(document.querySelector(attributes[1]));
            elem.css(attributes[0], targetElem.outerHeight());

            angular.element($window).on('scroll', function() {
                elem.css(attributes[0], targetElem.outerHeight());
            });
            angular.element($window).on('resize', function() {
                elem.css(attributes[0], targetElem.outerHeight());
            });

            scope.$watch(function () {
                    return targetElem.outerHeight();
                },
                function (newValue, oldValue) {
                    if (newValue != oldValue) {
                        elem.css(attributes[0], newValue);
                    }
                });
        }
    };
})

和HTML：

<div id="regularHeightItem"></div>
<div bind-to-height="['height', '#regularHeightItem']" id="height2"></div>

我将它用于占位符，它需要保持与向下滚动时切换到固定的元素相同的高度，但它具有动态内容，因此它本身需要是动态的。您可以根据需要更新的内容来更改$ window.on（）内容。

角度固定显示元素与“兄弟”相同

1 个答案: