How can I synchronize DOM element width in AngularJS? - angularjs

Question

I would like to synchronize the width of DOM elements such that the width is always the smallest width that can accommodate the content. I can successfully increase the size by $watching for an increase (based on ref1 & ref2), but I can't figure out how to shrink the element after it's been enlarged.
Angular directive:
app.directive('syncWidth', function () { //declaration; identifier master
return {
restrict: 'A',
link: function (scope, element) {
var linkElement = element[0];
scope.$watch(
function () {
return (linkElement.scrollWidth);
},
function (newValue, oldValue) {
if (newValue > oldValue) {
scope.testWidth = {
'min-width': newValue + 'px'
}
}
},
true
);
}
};
});
HTML:
<input type="text" ng-model="myText">
<input type="text" ng-model="myText2">
<div sync-width="test" style="background-color: lightblue" ng-style="testWidth">1 [{{myText}}]</div>
<div sync-width="test" style="background-color: lightcoral" ng-style="testWidth">2 [{{myText2}}]</div>
I'm assuming the issue is that the two elements are referencing another. I'm thinking the pseudocode would look something like:
Set a global groupMinWidth variable
Detect element.contentWidth changed
If newContentWidth > groupMinWidth {
groupMinWidth = newContentWidth;
}
If oldContentWidth == groupMinWidth {
check all synchronized elements and set groupMinWidth to the largest contentWidth;
}
Thanks for the help.

Answer 1

I'm now working on the plunkr but not fully working yet : https://plnkr.co/edit/6XfGMzI1su8cpHjkyDWC?p=preview . The point is $watching the change on the text, when the text gets reduced, use a shared value/global value to record and check which one's width is the widest , set the min-width to that value to both of the elements.
===EDIT===
Finally make this work: https://plnkr.co/edit/c2FOu5LfPfGfnkU12KTG?p=preview
So the principle behind this is : I need a changeable div to measure the scrollWidth/offsetWidth when the content changed. So I add a new nested div which include the content. I made the inner div as a float and once the content changed I will update the outer div's width by setting it's width to the inner div's width. The key point is because the inner div is FLOAT, it can overflows the outer div's right border, but the out div is watching the change on the content, so the outer div's width will be updated immediately.