Having implemented two Bootstrap tabs on a single page, with each tab displaying a list of items, I wanted to ensure that each list item appeared as a square. To achieve this, I created an AngularJS directive which sets the height of each list item equal to its dynamic width under Bootstrap control:
app.directive('squareDiv', function () {
return {
restrict: "A",
link: function (scope, element,attr) {
scope.getWidth = function () {
return element.width();
};
scope.$watch(scope.getWidth, function (width) {
element.css({
height: width + 'px'
});
}, true);
}
};
});
Upon initial page load, the list items in the first tab appear as squares, indicating that the directive is functioning correctly. However, upon switching to another tab, the list items there revert back to the default height of 100 px. Even after returning to the first tab, the list items no longer display as squares.
What could be causing this issue?
UPDATE 1:
To better illustrate the problem, here is a plunker demonstrating the issue: http://plnkr.co/edit/Pc7keuRXR9R3U6AhZmFE?p=preview
UPDATE 2:
Replacing Bootstrap with UI-Bootstrap in a new plunker still results in the same problem persisting: http://plnkr.co/edit/rLE1wUAHKzJP6FVnGF6b?p=preview
UPDATE 3:
A workaround involved implementing a watch for tab switches rather than width changes, although ideally, understanding why the width watch fails after a tab switch remains a priority: http://plnkr.co/edit/Y4Goe0cexq979JsIcBxl?p=preview
The root cause behind the width watch malfunction following a tab switch is still something I'd like to comprehend.