Question

我有一个指令，将图像渲染为背景图像。它在Chrome和Safari中运行良好（据我所知）但似乎在Firefox中不起作用（背景图像不显示）。我的研究似乎表明可能是范围。$ watch会有所帮助，但我不完全确定如何应用它以便它会让事情变得更好。

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

非常感谢帮助或指导。谢谢。

Answer 1

我认为你在C:\a tlassian-plugin-sdk\apache-maven\conf\settings.xml url属性中弄乱了"。

<强>代码

background-image

Answer 2

如果异步设置pictures属性中的值，则应使用scope.$watch进行观察，并在设置属性值后设置背景图像。当指令的link函数运行时，可能已经很幸运地在Chrome和Safari中设置了该值。

因此，如果您的标记看起来像这样：

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

通过AJAX调用填充images数组，那么你的指令看起来像这样：

.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

Answer 3

奇怪的是，解决方案是将“display：block”添加到img标签css中。感谢大家的帮助。

指令在Firefox中失败

3 个答案: