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?

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

tymeJV
– tymeJV

2014-12-04 03:55:56 +00:00
Commented Dec 4, 2014 at 3:55 — tymeJV
– tymeJV, Commented Dec 4, 2014 at 3:55

GregL · Accepted Answer · 2014-12-04 03:56:44Z

8

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'}".

answered Dec 4, 2014 at 3:56

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related