如何在不使用 jquery 或 javascript 的情况下设置 md dailog 元素的高度？答案

【问题标题】：How to set height of md dailog element without using jquery or javascript?如何在不使用 jquery 或 javascript 的情况下设置 md dailog 元素的高度？
【发布时间】：2017-02-07 16:35:29
【问题描述】：

我只想在角度中设置一次元素的高度，但我不想在其中使用 jquery。我不能使用 ng-style，因为它会触发多次。

这是我的 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>

在这个我为 md-virtual 重复容器设置高度，这个标记被包裹在一个 div 中，id 为“mdDialogProcessFlows”。

这是打字稿中计算高度的函数

 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 样式、指令、原生 javascript 或 jquery - 还有什么可以使用的？
这就是我必须找到的解决这个问题的方法，它只触发一次

标签： javascript jquery css angularjs typescript

【解决方案1】：

您仍然可以将ng-style 与一次性绑定一起使用。这只会设置一次值，并且不会再次调用该函数。使用此语法：

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

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

【讨论】：