我有两个标签设置如此
<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时调整窗口大小,则会出现同样的问题