如何设置md每日元素的高度,而不使用jquery或javascript

How to set height of md dailog element without using jquery or javascript?

本文关键字:javascript jquery 高度 何设置 设置 元素 每日 md      更新时间:2023-09-26

我想在angular中设置一个元素的高度,但我不想在里面使用jquery。我不能使用ng样式,因为它会触发多次。

这是我的HTML

 <md-card>
            <md-table-container flex>
                <md-virtual-repeat-container id="vrContainerProcessFlow" ng-init="$ctrl.getMdTableContainerWidth()">
                    <table md-table class="md-table-striped" md-row-select="true" multiple="true" ng-model="$ctrl.selected" md-progress="$ctrl.promise">
                        <thead md-head fix-head md-order="modifyTs">
                            <tr md-row>
                                <th md-column md-order-by="processFlowNbr">Number</th>
                                <th md-column md-order-by="processFlowDesc">Name</th>
                                <th md-column md-order-by="ownerUserId">Created By</th>
                                <th md-column md-order-by="modifyUserId">Modified By</th>
                                <th md-column md-order-by="createTs">Created Date</th>
                                <th md-column md-order-by="modifyTs">Last Modified Date</th>
                            </tr>
                        </thead>
                        <tbody md-body>
                            <tr md-row md-select="processFlow" md-on-select="$ctrl.updateSelection" md-on-deselect="$ctrl.updateSelection" md-virtual-repeat="processFlow in $ctrl.processFlows | orderBy: modifyTs">
                                <td md-cell
                                    ng-click="$ctrl.OnProcessFlowClick($event, processFlow)">
                                    {{processFlow.processFlowNbr}}
                                    <md-tooltip>Click to modify</md-tooltip>
                                </td>
                                <td md-cell>{{processFlow.processFlowNbr}}</td>
                                <td md-cell>{{processFlow.processFlowDesc}}</td>
                                <td md-cell>{{processFlow.ownerUserId}}</td>
                                <td md-cell>{{processFlow.modifyUserId}}</td>
                                <td md-cell>{{processFlow.createTs | date:'MM/dd/yyyy'}}</td>
                                <td md-cell>{{processFlow.modifyTs | date:'MM/dd/yyyy'}}</td>
                            </tr>
                            <tr md-row ng-if="$ctrl.processFlows.length === 0">
                                <td md-cell>No Records Found !</td>
                            </tr>
                        </tbody>
                    </table>
                </md-virtual-repeat-container>
            </md-table-container>
            <process-flows-confirm-delete></process-flows-confirm-delete>
        </md-card>

在这里设置了虚拟重复容器的高度,这个标记被包装在一个id为"mdDialogProcessFlows"的div中。

这是计算typescript

中的高度的函数
 getMdTableContainerWidth(): void {
        let style = "height: ";
        let mdDialog = document.getElementById("mdDialogProcessFlows").scrollHeight;
        style += mdDialog - 80 + 'px';
        let mdVRContainer = angular.element(document.getElementById("vrContainerProcessFlow"));
        mdVRContainer.attr("style", style);
    }

有没有人有任何解决方案不使用ng风格,指令,当然没有javascript或jquery?

您仍然可以使用一次性绑定的ng-style。这将只设置一次值,而不会第二次调用该函数。使用以下语法:

ng-style="::{width: getMdTableContainerWidth()}"

::将使表达式成为一次性绑定