javascript - Angular Directive(指令) - 自动拉伸(stretch)到底部

Question

我有以下布局:

HTML

<section>
    <div ui-view="table"></div> // contains the table, height max 20 items

    <div class="row">
        <div class="col-md-4" ui-view="row1"></div>
        <div class="col-md-4" ui-view="row1"></div>
        <div class="col-md-4" ui-view="row1"></div>
    </div>

</section>

目标

想法是制作一个 Angular Directive(指令)，将带注释的容器拉伸(stretch)到父容器减去所有兄弟容器的最大高度。

指令(我还没有)

module App.Directive {

    export class AutoStretchDirective {

        private window: ng.IWindowService;

        restrict: string = "A";

        constructor($window: ng.IWindowService) {
            this.window = $window;
            this.link = this.link.bind(this);
        }

        link = (scope, element, attrs) => {
            var combined = collection => {
                var heights, node, i, len;
                heights = 0;
                for (i = 0, len = collection.length; i < len; i ++) {
                    node = collection[i];
                    heights += node.offsetHeight;
                }
                return heights;
            };

            var siblings = $elm => {
                var elm, i, len, ref, results;
                ref = $elm.parent().children();
                results = [];
                for (i = 0, len = ref.length; i < len; i++) {
                    elm = ref[i];
                    if (elm !== $elm[0]) {
                        results.push(elm);
                    }
                }
                return results;
            };

            angular.element(this.window).bind("resize", () => {
                var additionalHeight, parentHeight;
                additionalHeight = attrs.additionalHeight || 0;
                parentHeight = window.innerHeight - element.parent()[0].getBoundingClientRect().top;
                return element.css("height", parentHeight - combineHeights(siblings(element)) - additionalHeight);
            });

          };
     };
}

该指令加载正常，但它无法正常工作。一旦 ng-repeat 填充，容器就会被向下推到所有元素所需的高度。我试过用 height: 100% 和 overflow (css) 装饰列，但它似乎被忽略了。我错过了什么吗？有没有办法调试指令应用于元素的转换？

Answer 1

我刚刚发布了一个 Bower 组件 angular-stretch这样做