Ng风格不适合背景

Question

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. 我需要从配置对象到ng-style设置元素的背景，但是由于某些未知的原因我不能这样做，这对我来说真的很奇怪，我真的找不到原因。

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 pblc在这里代表控制器，我正在使用controllerAs选项

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: 最奇怪的是宽度和高度设置，在渲染的html中我看到：

<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. 我真的不知道ng风格如何工作。 Is there some issue with background I wasn't able to find? 背景中是否存在一些我无法找到的问题？

Answer 1

Updated answer: You have a typo - plbc.options.color instead of pblc.options.color 更新的答案：你有一个错字 - plbc.options.color而不是pblc.options.color

The most likely reason is that plbc.options.color is undefined, empty, not in scope or misconfigured. 最可能的原因是plbc.options.color未定义，为空，不在范围内或配置错误。 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. 尝试将其作为模板中的表达式输出 - {{plbc.options.color}}并检查它。

Answer 2

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 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 使用$ scope而不是this或者如果你想要this.progressLoptions然后在HTML中使用

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

Demo : https://jsbin.com/zihazi/edit?html,js,output 演示： https ： //jsbin.com/zihazi/edit？html，js，output

Ng风格不适合背景

问题描述

2 个解决方案

解决方案1
4 已采纳 2016-09-14 16:01:56

解决方案2
3 2016-09-14 15:54:44

Ng风格不适合背景

问题描述

2 个解决方案

解决方案1 4 已采纳 2016-09-14 16:01:56

解决方案2 3 2016-09-14 15:54:44

解决方案1
4 已采纳 2016-09-14 16:01:56

解决方案2
3 2016-09-14 15:54:44