指令在Firefox中失敗

我有一個指令將圖像渲染爲背景圖像。它在Chrome和Safari中運行良好（據我所知），但在Firefox中似乎不起作用（背景圖像不顯示）。我的研究似乎表明，也許範圍。$ watch會有所幫助，但我不完全確定如何應用它，以便使事情變得更好。指令在Firefox中失敗

.directive('pictures', function() { 
    return { 
     restrict: 'EA', 
     link: function (scope, element, attrs) { 
     var url = attrs.pictures; 
       element.css({ 
      'background-image': 'url(' + url +')', 
      'background-size' : 'cover' 
      }); 
     } 
    }; 
    });

幫助或方向將不勝感激。謝謝。

來源

2015-04-24 mjabraham

什麼是您的Firefox版本？ – mggSoft

我的版本是37.02 – mjabraham

解決方法很奇怪，在img標籤css中添加了「display：block」。感謝大家的幫助。

來源

2015-04-26 00:56:10 mjabraham

我認爲你的"在background-image url屬性。

代碼

.directive('pictures', function() { 
    return { 
     restrict: 'EA', 
     link: function (scope, element, attrs) { 
     var url = attrs.pictures; 
       element.css({ 
      'background-image': 'url("' + url +'")', <-- Change here 
      'background-size' : 'cover' 
      }); 
     } 
    }; 
    });

來源

2015-04-24 16:35:43

沒有工作:-(感謝雖然... – mjabraham

@beardedmike我知道你的網址是什麼嗎？ –

如果pictures屬性的值被設置異步那麼你應該使用scope.$watch觀看它，並設置背景圖片的屬性值已設置之後。當您的指令的link函數運行時，它可能只是在Chrome和Safari中已經設置的值。

所以，如果您的標記看起來是這樣的：

<div class="pic" pictures="images[0].imageUrl"></div>

在您images陣列通過AJAX調用填充，那麼你的指令會是這個樣子：

.directive('pictures', function() { 
    return { 
    restrict: 'EA', 
    link: function (scope, element, attrs) { 

     // attrs.pictures probably not set at this point so $watch it 

     scope.$watch(attrs.pictures, function (newVal, oldVal) { 
     if (!newVal || (newVal === oldVal)) { 
      return; 
     } 

      element.css({ 
      'background-image': 'url(' + newVal +')', 
      'background-size' : 'cover' 
      }); 

     }); 
    } 
    }; 
});

Here's a plunk。

來源

2015-04-25 18:26:31 MikeJ

指令在Firefox中失敗

回答

相關問題