admin管理员组

文章数量:1406000

I need to set background of element from configuration object through ng-style, but I can't do that for some unknown reason, it's really weird for me and I really can't find the reason why.

The element I'm trying to configure:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }"></div>

pblc stands for controller here, I'm using controllerAs option

The configuration object:

this.progressLOptions = {
    color: '#F0F3F4',
    width: '200px',
    height: '20px',
};

The weirdest thing is that width and height are setted, in rendered html I see this:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }" style="width: 200px; height: 20px;">
</div>

I really have no idea how can ng-style work like so. Is there some issue with background I wasn't able to find?

I need to set background of element from configuration object through ng-style, but I can't do that for some unknown reason, it's really weird for me and I really can't find the reason why.

The element I'm trying to configure:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }"></div>

pblc stands for controller here, I'm using controllerAs option

The configuration object:

this.progressLOptions = {
    color: '#F0F3F4',
    width: '200px',
    height: '20px',
};

The weirdest thing is that width and height are setted, in rendered html I see this:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }" style="width: 200px; height: 20px;">
</div>

I really have no idea how can ng-style work like so. Is there some issue with background I wasn't able to find?

  • javascript
  • html
  • css
  • angularjs
  • ng-style
Share Improve this question asked Sep 14, 2016 at 15:47 kemsbekemsbe 6051 gold badge10 silver badges18 bronze badges 2
  • what is pblc.options, As I can see you have progressLOptions,, have you messed up with scope variable name? – Pankaj Parkar Commented Sep 14, 2016 at 15:57
  • @PankajParkar nope, I just use controllerAs for directive, if it was naming, height and width won't be setted too – kemsbe Commented Sep 14, 2016 at 15:59
Add a ment  | 

2 Answers 2

Reset to default 5

Updated answer: You have a typo - plbc.options.color instead of pblc.options.color

The most likely reason is that plbc.options.color is undefined, empty, not in scope or misconfigured. This is in case there's no syntax error of course.

Try outputting it as an expression in the template - {{plbc.options.color}} and check it.

I have changed your code a bit, Please look at this

    <div id="progress-l" ng-style="{ 'width': progressLOptions.width, 'height': progressLOptions.height, 'background': progressLOptions.color }" style="width: 200px; height: 20px;">
   </div>

JS

   $scope.progressLOptions = {
    color: '#000',
     width: '200px',
    height: '20px',
   };

It is working. Use $scope instead of this or else if you want to you this.progressLoptions then in HTML use 

<body ng-controller="somename as controllerName"> 
and then access this using somename.functionName

Demo : https://jsbin./zihazi/edit?html,js,output

本文标签： javascriptNgstyle not working for backgroundStack Overflow

版权声明：本文标题：javascript - Ng-style not working for background - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744962488a2634741.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。