指令中的角度范围的变量不会以ng样式同步

Question

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

起初，我写了一个简单的指令。

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> 

并导致损坏。第一个输入和第二个文本说宽度是285.但是在第三个，叶子图标的大小只是默认大小。
（对不起，没有发布结果图片，我很喜欢这里，我没有任何声望）

它怎么会发生？更重要的是，我该如何解决它？

Answer 1

你刚刚得到了ng-style语法混淆。

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

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