Ng风格不适合背景

Question

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

我正在尝试配置的元素：

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

pblc在这里代表控制器，我正在使用controllerAs选项

配置对象：

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

最奇怪的是宽度和高度设置，在渲染的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>

我真的不知道ng风格如何工作。 背景中是否存在一些我无法找到的问题？

Answer 1

更新的答案：你有一个错字 - plbc.options.color而不是pblc.options.color

最可能的原因是plbc.options.color未定义，为空，不在范围内或配置错误。 这是因为当然没有语法错误。

尝试将其作为模板中的表达式输出 - {{plbc.options.color}}并检查它。

Answer 2

我已经改变了你的代码，请看看这个

    <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',
   };

这是工作。 使用$ scope而不是this或者如果你想要this.progressLoptions然后在HTML中使用

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

演示： 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