Question

我有两个标签设置如此

<tabset>
    <tabA>
        <tab-heading>
        </tab-heading>
        <div resize>
        </div>
    </tab>
    <tabB>
        <tab-heading>
        </tab-heading>
        <div resize>
        </div>
    </tab>
</tabset>

和一个名为resize的指令，它找到浏览器窗口高度和它所在元素窗口顶部的距离，然后将元素的最大高度设置为这两个测量值的差值。看起来像这样

.directive('resize', function ($window) {
            return {
                restrict: "AE",
                transclude: true,
                scope: true,
                template: '<div id="scroll-container" ng-style="style()" ng-transclude></div>',
                link: function (scope, element) {

                    var w = angular.element($window);
                    scope.getWindowDimensions = function() {
                        return { 'h': w.height() };
                    };

                    scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) {
                        var e = angular.element(element);

                        scope.windowHeight = newValue.h;
                        scope.elementOffset = e.offset().top;
                        console.log(scope.windowHeight, scope.elementOffset);

                        scope.style = function() {
                            return {
                                'height': (scope.windowHeight - scope.elementOffset) + "px",
                                'max-height': (scope.windowHeight - scope.elementOffset) + "px",
                                'position': "relative",
                                'overflow': "auto"
                            }
                        }
                    }, true);
                    w.bind('resize', function() {
                        scope.$apply();
                    });
                }
            };
        })

这个指令在tabA上工作得很好但是它似乎无法在页面加载时得到tabB的顶部（它正确地记录了tabA，但是对于tabB是0）

如果我交换选项卡，它适用于tabB而不是tabA

有没有办法让它发挥作用？

EDIT1;如果我在选择tabB时调整窗口大小，指令中的$ watch会被触发，并且标签B的内容会按预期大小调整，但是如果我在未选择标签B时调整窗口大小，则会出现同样的问题

获取offset（）。顶部的角度引导选项卡内容

0 个答案: