Angularjs 获取方向角中元素子元素的实际宽度

我尝试在视图更新后获取子对象的宽度

我的指令：

.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();
        });
    }
});

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

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

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

    /*
    .
    .
    .
    */
});

<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>

我的控制器：

.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();
        });
    }
});

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

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

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

    /*
    .
    .
    .
    */
});

<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>

HTML:

.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();
        });
    }
});

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

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

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

    /*
    .
    .
    .
    */
});

<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>

图像
普罗杜托
刨花板
普雷西奥塔贝拉酒店
卡萨里亚
普雷西奥·普拉蒂卡多
%描述
%政治学
Preço c/Descon
博尼卡昂
佩蒂多学院
“alt=“{p.produto.produto.id | normalizearprodutosku}}”style=“最大高度：50px；" />
{{p.produto.produto.descripcao}
{p.produto.precatableview | currency}
{p.produto.gradeMinima}
雷亚尔美元
{{p.produto.precodescon*p.produto.alavancagem|currency}

---

有什么问题吗？

如果表体中没有任何

td

s（这就是为什么宽度始终为0），则需要在视图中添加单元格：

<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>

{{p.anyProperty1}}
{{p.anyProperty2}}
静态值

你的HTML是什么样子的？这是错误的方法。使用CSS。这里有一种方法可以做到这一点。@Alon look now。更新了我的question@AmyBlankenship，用于您的建议。数据渲染后，我需要更新大小th。这用于使用sroll和THAD修复创建表。@EmirMarques添加了我的答案。希望对您有所帮助，我更新了我的问题使用正确的html。为您的response@EmirMarques请注意，您的html将

td

s直接添加到

tbody

元素中，而不是

tr

-在您看来情况是否相同？@EmirMarques您是否可以尝试将任何

angular.element（element）

实例替换为

$（element）

（原生jQuery）？尝试添加

console.log（$（tr）.find（“td”）.eq（indexTh））；

并查看它是否如您所期望的那样输出正确的节点元素。我自己不确定问题到底出在哪里