angularjs - angularjs：如果定义了 url，则仅在 ngStyle 上设置背景图像

Question

我在范围上有一个属性，可以保存图像的 url (bgUrl)。现在我想将此图像用作“div”的背景图像。但是，如果属性未定义，我想使用由类 bg-image 定义的默认图像。现在我可以这样做了

<img ng-show="bgUrl" ng-src="bgUrl"/>
<div ng-hide="bgUrl" class="bg-image"/>

但是，我想将其合并为一个元素。我尝试过这样的事情

<div class="gb-image" ng-style="{true: 'background-image': 'url(\'' + bgUrl + '\')'}[bgUrl]"/>

我刚刚从谷歌复制了一些代码（不知道这是否可行）。有一件事很清楚，这不起作用:) 解决这个问题的好方法是什么，我的解决方案可以工作吗？

Answer 1

正确的方式是一种指令的方式：

app.directive('bg', function () {
    return {
        link: function(scope, element, attrs) {
          if(scope.bgUrl){
            element.css("background-image","url("+scope.bgUrl+")");
          } else {
            element.addClass("bg-default");             
          }
        }
    }
});

看看：http ://plnkr.co/edit/xYEjpp?p=preview