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?
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 haveprogressLOptions,, have you messed up with scope variable name? – Pankaj Parkar Commented Sep 14, 2016 at 15:57 -
@PankajParkar nope, I just use
controllerAsfor directive, if it was naming, height and width won't be setted too – kemsbe Commented Sep 14, 2016 at 15:59
2 Answers
Reset to default 5Updated 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