CODEWITHSUNDEEP
angularjs
marcel
marcel

Reputation: 3272

angularjs set background-image

I have a div to visualize progress.

Therefor I have this ng-style definition:

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)+'%)'};">

The document only shows the as clear-text. The values don't get rendered.

The values are correct:

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

Gives this out:

background-image:linear-gradient(left, rgba(255,0,0,1)59%,rgba(0,0,0,0)59%)

Another attempt was to create a directive:

<div class="audio-controls-wrapper" progress-animation="bufferProgressPercent" >

Directive:

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

But the attribute backgroundImage of this element is never set.

Upvotes: 0

Views: 304

Answers (2)

marcel
marcel

Reputation: 3272

To set the background in I had to use 

background

instead of 

background-image

further I had to replace 

linear-gradient(...

with 

-moz-linear-gradient(

that means

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

became this:

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

I guess I have to add all the browser besides chrom a certain linear gradient.

Upvotes: 0

Joseph M Tsai
Joseph M Tsai

Reputation: 568

Did you enter the watch function into directive ?

for example

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

Upvotes: 2

Related Questions