title: Apply ng-style only if this data exists
body: <p>I'm building a page with Angular and trying to conditionally apply ng-style to a div only if 'cover' is defined in my data resource. <code>{{data.cover}}</code> renders the cover image URL in the template. I tried the code below but it doesn't work.</p>
  
  <pre><code>&lt;div class="cover" ng-style="{'background-image: url({{data.cover}})':data.cover}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong> This is the solution I came up with, adding this in the controller (I needed to do the same thing for the user cover and avatar): </p>
  
  <pre><code>var cover = $scope.data.cover; 
  var avatar = $scope.data.user.image; 
  
  if (typeof $scope.data.cover !== "undefined") { 
      $scope.coverImage = { 'background-image': 'url('+cover+')' }; 
  } 
  
  if (typeof $scope.data.avatar !== "undefined") { 
      $scope.avatarImage = { 'background-image': 'url('+avatar+')' }; 
  }
  </code></pre>
  
  <p>In the HTML template:</p>
  
  <pre><code>&lt;div class="cover" ng-style="coverImage"&gt;&lt;/div&gt;
  &lt;div class="avatar" ng-style="avatarImage"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Although I'm not sure if this would be considered DOM manipulation that should be handled via a directive and not a controller? Seemed much simpler to do this in the controller rather than a separate directive.</p>