AngularJS/HTML: need to modify element height after render

Question

I am trying to solve something that I thought would be routine and simple to fix. I have a table within a table, like so:

<table style="border:1px solid" class="bordertable">
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>text
            <table style="margin-left:15px;">
                <tr id="om1a" name="om1a" tablefix1>
                    <td>text</td>
                </tr>
                <tr id="om2a" name="om2a">
                    <td>text</td>
                </tr>
            </table>
        </td>
        <td><br /><br />
            <table>
                <tr id="om1" name="om1">
                    <td>text</td>
                </tr>
                <tr id="om2" name="om2" tableFix2>
                    <td>text</td>
                </tr>
            </table>
        </td>-->
    </tr>
    <tr>
        <td>text</td>
        <td><ul class="ulnorm">
            <li>text</li>
        </ul>
        </td>
    </tr>
    </table>

Basically, the two columns of the second table are split by the top-level table. So, I need to make sure that the height of the rightmost column (1/2) is equal to the height of the leftmost column (1/2a) $("#om1").height($("#om1a").height())

After spending approximately 2 hours researching into how to do this with Angular, I have yet to come up with a working solution. Solutions I have tried so far include:
-using $timeout(f(), 0)
-using scope.$watch(f(){}) in a directive
-using code in the controller
-moving around the placement of the tablefix1/tablefix2 directive

For each of these solutions I have tried, the code is being run before the element is actually rendered (so that $("#om1a").height() returns 0).

Is there something I am missing? Is there another way to get the same effect?

Thank you.

I think your question has been answered here: http://stackoverflow.com/questions/12240639/how-can-i-run-a-directive-after-the-dom-has-finished-rendering — gpersell, Oct 15 '15 at 20:22
I tried using that with $timeout, but it has not worked for me. Let me try one thing quickly, though. — ww2406, Oct 15 '15 at 20:26
@gpersell I tried changing my directive from function link(scope, element, attrs) { $timeout(function() { $("#om1").height($("#om1a").height()); }); } return { link: link }; to just return function(scope, element, attrs) { timeout(function() { $("#om1").height($("#om1a").height()); }); } — ww2406, Oct 15 '15 at 20:28
Does anyone have any ideas at all on how to solve this? @gpersell? — ww2406, Oct 21 '15 at 21:21

score -1 · Accepted Answer · answered Oct 21 '15 at 21:50

I figured out what was causing this issue: this content is being displayed in a jQuery UI Mobile collapsible widget, and thus a directive was not the right way to go. Rather, I needed to bind to the widget's expand event and put the needed code there.

AngularJS/HTML: need to modify element height after render

1 Answers1