Pick width child element in Angular directive

Question

Next I have a table fed by a simple routine. I need to make the scroll to tbody fixed. So far so good. I could do N shapes. To try to make the table responsive I am using a directive to calculate and set the value of each th after the data is rendered. To calculate the size of each th I’m using the first row of tbody to know which size I should put on each th to get them aligned.

Well! There’s the problem. For some reason when I try to get the size of the Tds all return 0. I tried by clientWidth, offsetWidth, with etc. All return 0.

Below the screen representing the problem:

My Directive:

.directive("scrolltbody", function ($timeout) {
    return {
        scope: {
            val: "="
        },
        link: function(scope, element, attrs) {
            scope.$on("ajustarTabelaPedido", function() {
                $timeout(function(){
                    compilar(element, attrs);
                }, 10000);
            });
        }
    }

    function compilar (element, attrs){
        var wTable = angular.element(element).width();
        var th = angular.element(element).find("thead th");
        var tr = angular.element(element).find("tbody tr").get(0);
        var td = angular.element(tr).find("td");

        angular.forEach(th, function (itemTh, indexTh){
            var wElement = angular.element(itemTh).attr("widthscroll");
            var wElementCalc = ((wElement * wTable) / 100);
            /* w = 0 forever*/
            var w = $(tr).find("td").eq(indexTh).outerWidth();
        });
    }
});

My controller:

.controller("PedidoController", function($scope, $pedido) {
    /*
    .
    .
    .
    */

    $scope.buscar = function() {
        $pedido.buscar().then(function(req) {
            $scope.pedido = req;

            /* This dispatch update for directive */
            $scope.$broadcast("ajustarTabelaPedido");
        });
    };

    /*
    .
    .
    .
    */
});

HTML:

<table id="pedido" class="gridbox pedido" scrolltbody val="pedido" style="height: 350px;">
    <thead data-spy="affix" data-offset-top="60" data-offset-bottom="200">
        <tr>
            <th>Imagem</th>
            <th>Produto</th>
            <th>
                <span ng-click="ordem.coluna='produto.alavancagem';ordem.reverso=!ordem.reverso">Planejado</span>
                <i ng-show="pedido.erroCaixaria" style="cursor: pointer;" class="fa fa-arrow-up fa-1 justify" title="Regularizar caixaria para mais." ng-click="corrigeCaixaria(pedido, 1)"></i>
                <i ng-show="pedido.erroCaixaria" style="cursor: pointer;" class="fa fa-arrow-down fa-1 justify" title="Regularizar caixaria para menos." ng-click="corrigeCaixaria(pedido, 0)"></i>
            </th>
            <th>Preço Tabela</th>
            <th>Caixaria</th>
            <th>Preço Praticado</th>
            <th>% Desconto</th>
            <th>% Politica Desconto</th>
            <th>Preço c/ Desconto</th>
            <th>Bonificação</th>
            <th>Preço Pedido</th>
        </tr>
    </thead>
    <tbody class="body" id="pedido-produto">
        <tr ng-repeat="p in pedido.item | orderBy:ordem.coluna:ordem.reverso | filter: itemFilter" >
            <td><img src="<...>" alt="{{p.produto.produto.id | normalizarProdutoSku}}" style="max-height: 50px;" /></td>
            <td><i class="fa fa-trash-o fa-1 justify icon-lixeira"></i> {{p.produto.produto.descricao}}</td>
            <td>
                <input ng-model="p.produto.alavancagem" />
            </td>
            <td>{{p.produto.precoTabelaView | currency}}</td>
            <td>{{p.produto.gradeMinima}}</td>
            <td>
                <input ng-model="p.produto.precoPraticado"/>
            </td>
            <td><input ng-model="p.produto.percentualDesconto"/></td>
            <td><input ng-model="limitePoliticaDesconto"/></td>
            <td>R$ <input ng-model="p.produto.precoDesconto"/></td>
            <td  ng-class="{'celula-erro' : p.bonificacaoErro}">
                <input ng-model="p.produto.bonificacao" />
            </td>
            <td>{{p.produto.precoDesconto * p.produto.alavancagem | currency}}</td>
        </tr>
    </tbody>
</table>

What would be the problem?

Answer 1

See if this works for you:

 function getListTRandTDSize(idElementTable) {

        var tab = document.getElementById(idElementTable), 
            tr = tab.getElementsByTagName("tr"), tdList = [];

        for (var i in tr) {
             var TD = tr[i].getElementsByTagName("td")[0];
             var sizeTD = angular.element(TD).width();
             var sizeTR = angular.element(tr[i]).width();
             tdList.push({"td_size": sizeTD, "tr_size": sizeTR});
         }
         return tdList;
 }

 var collection = getListTRandTDSize("pedido");

 console.log(collection);