为什么我不能用 ng-style 设置元素的高度？答案

【问题标题】：Why can't I set the height of an element with ng-style?为什么我不能用 ng-style 设置元素的高度？
【发布时间】：2015-08-13 16:36:40
【问题描述】：

我正在尝试添加动态设置div 的高度，但未成功设置。我得到窗口的高度并将其除以 3，但它不起作用。这是我设置高度的地方：

<div id="wrapper" ng-style="height :hgt+'px'">

我正在像这样设置范围变量：

 $scope.hgt = $window.innerHeight / 3;

但是高度没有设置。

Plunker http://plnkr.co/edit/eGaPwUdPgknwDnozMJWU?p=preview

【问题讨论】：

【解决方案1】：

试试这个：

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

【讨论】：

【解决方案2】：

根据文档：https://docs.angularjs.org/api/ng/directive/ngStyle

ng-style 接受一个对象，而不是一个字符串。这是修复：

<div id="wrapper" ng-style="{ height :hgt+'px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>

【讨论】：

【解决方案3】：

ng-style 的用法有点违反直觉。您正在尝试使用它来插入值，但根据 Angular documentation ng-style 需要一个表达式“它评估一个对象，其键是 CSS 样式名称，值是这些 CSS 键的对应值。”

因此，您可能想尝试：

$scope.hgt = { height: ($window.innerHeight / 3) + 'px' };
<div id="wrapper" ng-style="hgt">

希望这会有所帮助！

【讨论】：

【解决方案4】：

您应该在ng-style 中放入字典，如下所示

<div id="wrapper" ng-style="{height: '{{hgt}}px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>

【讨论】：