最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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?

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?

Share Improve this question asked Dec 4, 2014 at 3:51 MoonriseMoonrise 1131 silver badge7 bronze badges 1
  • 1 ng-style="{ 'font-size' : parentSize.width }" – tymeJV Commented Dec 4, 2014 at 3:55
Add a ment  | 

1 Answer 1

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

发布评论

评论列表(0)

  1. 暂无评论