我有一个div来可视化进度。angularjs设置背景图像
为此我有这样的NG-样式定义:
ng-style="{'background-image':'linear-gradient(left, rgba(255,0,0,1)'+bufferProgressPercent!=='NaN'?bufferProgressPercent:0+'%,rgba(0,0,0,0)'+(bufferProgressPercent!=='NaN'?bufferProgressPercent:0)+'%)!important'};"
//output in developer-tools
<div class="audio-controls-wrapper" ng-style="{'backgroundImage':'linear- gradient(left, rgba(255,0,0,1)'+bufferProgressPercent!=='NaN'? bufferProgressPercent:0+'%,rgba(0,0,0,0)'+(bufferProgressPercent!=='NaN'? bufferProgressPercent:0)+'%)'};">
该文件只显示为明文。这些值不会被渲染。
值是正确的:
{{'background-image:linear-gradient(left, rgba(255,0,0,1)'+ (bufferProgressPercent!=='NaN'?bufferProgressPercent:0)+'%,rgba(0,0,0,0)'+(bufferProgressPercent!=='NaN'?bufferProgressPercent:0)+'%)'}}
给出了这一点:
background-image:linear-gradient(left, rgba(255,0,0,1)59%,rgba(0,0,0,0)59%)
的另一种尝试是建立一个指令:
<div class="audio-controls-wrapper" progress-animation="bufferProgressPercent" >
指令:
scope.$watch('progressAnimation', function(current, old){
if(angular.isDefined(current) && current !== old){
var backgroundImage = 'linear-gradient(left, rgba(255,0,0,1)'+ (current!=='NaN'?current:0)+'%,rgba(0,0,0,0)'+(current!=='NaN'? current:0)+'%)!important';
//scope.$applyAsync(function(){
//element.css({'backgroundImage':backgroundImage});
element[0].style.backgroundImage = backgroundImage;
$compile(element.contents())(scope);
//});
console.log(backgroundImage)
console.log(element[0].style)
}
});
但是此元素的属性backgroundImage从未设置。
你对ng样式值的期望应该在页面呈现之后? –
变量被替换 – marcel
你能写出它应该是什么样子的例子吗? –