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

你能写出它应该是什么样子的例子吗？ –

答

您是否将手表功能输入指令？

例如

.directive('progressAnimation', function() { 
return { 
    restrict: 'A', //E = element, A = attribute, C = class, M = comment   
    scope: { // input the var that you want to watch 
      }, 

    link: function ($scope, element, attrs) { 
//put your watch function here 
      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'; 

     element[0].style.backgroundImage = backgroundImage; 

      $compile(element.contents())(scope); 

      console.log(backgroundImage) 
      console.log(element[0].style) 
     } 

     } //DOM manipulation 
} 
});

是的，这与我所做的相似。不要忘记注入$ compile – marcel

你有没有调试来检查已经进入的手表功能。 –

答

设置背景中，我不得不使用

background

，而不是

background-image

进一步我不得不更换

linear-gradient(...

与

-moz-linear-gradient(

这意味着

{{'background-image:linear-gradient(left, rgba(255,0,0,1)'+ (bufferProgressPercent!=='NaN'?bufferProgressPercent:0)+'%,rgba(0,0,0,0)'+(bufferProgressPercent!=='NaN'?bufferProgressPercent:0)+'%)'}}

成了这样：

{{'background:-moz-linear-gradient((left, rgba(255,0,0,1)'+ (bufferProgressPercent!=='NaN'?bufferProgressPercent:0)+'%,rgba(0,0,0,0)'+(bufferProgressPercent!=='NaN'?bufferProgressPercent:0)+'%)'}}

我想我必须添加所有的浏览器除了CHROM一定的线性渐变。

angularjs设置背景图像

相关推荐