Angular 使固定显示元素的大小与“兄弟”相同

Question

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

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

<!-- 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>

它们的样式看起来像这样：

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

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

到目前为止，我已经尝试使用名为 ixTotalbar 的指令来执行此操作，但我尝试它的任何方式都不起作用，我尝试在 cmets 中添加所有东西，但它们都没有正确调整大小。

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());
}

有趣的是你可以看到一些console.log()s，其中一个输出是兄弟的风格，我已经验证是正确的。但是，宽度设置不正确，所以我不明白我需要做什么。

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() 内容。