Question

这是我的指示

(function() {
  'use strict';

  angular
    .module('app')
    .directive('backgroundImage', Background);

    function Background () {
      return function (scope, element, attrs) {
        scope.$watch(attrs.backgroundImage, function(value) {
          element.css({
            'background-image': 'url(https://example.com/' + value + '.jpg)',
            'background-repeat': 'no-repeat',
            'background-position': 'center center',
            'background-attachment': 'fixed',
            '-webkit-background-size': 'cover',
            '-moz-background-size': 'cover',
            '-o-background-size': 'cover',
            'background-size': 'cover'
          });
        });
      };
    }
}());

我从视图中调用以下代码

<div background-image="id"></div>

我的问题是，尽管图像已正确加载，但它并未显示在视图中。你有什么想法吗？

Answer 1

您还需要提供/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/，以便可见背景图片，如果需要也可以提供宽度。由于该div内没有内容，因此它的高度为0。如果没有提到特定的宽度，height作为块元素将占用其容器的整个宽度。

示例：

div

如果您有预设的高度和宽度，请通过css设置。如果需要使其灵活，可以通过创建临时图像对象来计算高度和宽度。

      element.css({
        'background-image': 'url(https://example.com/' + value + '.jpg)',
        'background-repeat': 'no-repeat',
        'background-position': 'center center',
        'background-attachment': 'fixed',
        '-webkit-background-size': 'cover',
        '-moz-background-size': 'cover',
        '-o-background-size': 'cover',
        'background-size': 'cover',
        'height' :'200px'
      });

背景图像并未显示创建指令

1 个答案: