Get real width of element child in directive angular - angularjs

Question

I tried get the width of child after the view updated.
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>
Whats the problem?

Answer 1

You don't have any tds in your table body (that's why the width is always 0), you need to add the cells in your view:
<tr ng-repeat="p in pedido.item | orderBy:ordem.coluna:ordem.reverso | filter: itemFilter" >
<td>{{ p.anyProperty1 }}</td>
<td>{{ p.anyProperty2 }}</td>
<td>STATIC VALUE</td>
</tr>