angularjs设置背景-图像

Question

我有一个div来可视化进度。

因此，我有这个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从未设置过。

Answer 1

您是否在指令中输入了watch函数？

例如

 .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
}
});

Answer 2

要在中设置背景，我必须使用

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之外的所有浏览器一个特定的线性渐变。