Angular scope's variable from directive not syncing in ng-style

Question

i got a very weird situation here.

At first, I wrote a simple directive.

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

And this is my simplified html code

<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>

And result is broken. No.1 input and No.2 text says width is 285. But at No.3, that leaf icon's size is just default size.
(Sorry for not posting result image. I'm very noob here and i don't have any reputation)

How can it happened? And much importantly, how can i solve it?

Answer 1

You have just got your ng-style syntax confused.

The value for each of the properties of the object in ng-style is an AngularJS expression, which means you can refer directly to scope properties.

Change it to ng-style="{'font-size': parentSize.width + 'px'}".