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從未設置。

來源

2016-03-06 marcel

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

來源

2016-03-06 16:24:36

是的，這與我所做的相似。不要忘記注入$ 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一定的線性漸變。

來源

2016-03-07 21:33:46 marcel

angularjs設置背景圖像

回答

相關問題