来自指令的角度范围的变量未以 ng 样式同步答案

【问题标题】：Angular scope's variable from directive not syncing in ng-style来自指令的角度范围的变量未以 ng 样式同步
【发布时间】：2015-02-01 20:35:11
【问题描述】：

我遇到了一个非常奇怪的情况。

一开始，我写了一个简单的指令。

mublABase.directive('parentSize', function() {
    return {
        link : function(scope, elem, attrs) {
            scope.parentSize = {
                width : elem.parent().width(),
                height : elem.parent().height()
            }
        }
    }
});

这是我的简化 html 代码

<input type="text" ng-model="parentSize.width"> //for test No.1
<div parent-size class="no-border">
    {{parentSize.width}} //for test No.2
    <span class="glyphicon glyphicon-leaf" ng-style="{'font-size':'{{parentSize.width}}px'}"></span> //this is the problem No.3
</div>

结果被破坏了。 No.1 输入和 No.2 文本说宽度是 285。但是在 No.3 处，叶子图标的大小只是默认大小。
（抱歉没有发布结果图片。我在这里很菜鸟，没有任何声誉）

怎么会这样？更重要的是，我该如何解决？

【问题讨论】：

ng-style="{ 'font-size' : parentSize.width }"

标签： javascript angularjs angularjs-directive ng-style

【解决方案1】：

您刚刚混淆了 ng-style 语法。

ng-style 中对象的每个属性的值都是一个 AngularJS 表达式，这意味着您可以直接引用范围属性。

将其更改为ng-style="{'font-size': parentSize.width + 'px'}"。

【讨论】：