html - Angular 使固定显示元素与 "sibling"大小相同

Question

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

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

<!-- 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 的指令来执行此操作，但无论我如何尝试，它都不起作用，我尝试在评论中添加所有内容，但没有一个正确调整大小。

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()，其中一个输出是 sibling 的风格，我已经验证它是正确的。但是，宽度设置不正确，所以我不明白我需要做什么。

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