angularjs set background-image

Question

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.

What you expect to ng-style value should be after page render? — Slava N.
– Slava N., Commented Mar 6, 2016 at 16:13

Joseph M Tsai · Accepted Answer · 2016-03-06 16:24:36Z

2

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

answered Mar 6, 2016 at 16:24

Joseph M Tsai

5683 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marcel Over a year ago

Yes, that's similar to what I did. Don't forget to inject $compile

Joseph M Tsai Over a year ago

have you debug to check the watch function has entered.

marcel · Accepted Answer · 2016-03-07 21:33:46Z

0

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.

answered Mar 7, 2016 at 21:33

marcel

3,2628 gold badges46 silver badges77 bronze badges

Collectives™ on Stack Overflow

angularjs set background-image

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related