Question

我尝试在更新视图后获取子宽度。

我的指示：

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

    /*
    .
    .
    .
    */
});

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>

问题是什么？

Answer 1

您的表格中没有td（这就是宽度始终为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>

在指令角中获取元素子的实际宽度

1 个答案: