angularjs：如果定义了url，则仅在ngStyle上设置background-image

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