CODEWITHSUNDEEP
cssangularjsng-style
alucardu
alucardu

Reputation: 129

view does not change background image

I have a template in which I call a function and I have a directive element,

.container-wrapper{"ng-controller" => "MovieRowCtrl"}
  %i.fa.fa-info-circle{"ng-click" => "updateSelectedMovie(movie)"}

#big-box-container{"ng-if" => "rowActive"}
  %movie-details{:movie => "selectedMovie"}

The function is inside a directive,

app.directive('movieDetails', MovieDetailsDirectiveFn)
  .controller('MovieRowCtrl', ['$scope', '$rootScope', MovieRowCtrlFn]);

function MovieDetailsDirectiveFn($animate) {
  return {
    restrict: 'E',
    scope: {
      movie: '=',
    },
    templateUrl: '../assets/angular-app/templates/_movie-info.html'
  }
}

function MovieRowCtrlFn($scope, $rootScope) {
  $scope.updateSelectedMovie = function updateVisibleMovieIndexFn(movie) {
    $scope.selectedMovie = movie;
    $rootScope.$broadcast('movieRowActivated', {targetScopeId: $scope.$id});
    $scope.rowActive = true;
  }
}

As you can see I set my MovieRowCtrl as controller for the .container-wrapper.

So when the updateSelectedMovie(movie) function fires it sets the $scope.rowActive to true (showing the element) and it inject the _movie-info.html template inside the %movie-details element.

This works fine.

In that _movie-info.html template I have this,

.movie-background{"ng-style" => "{'background-image':'url(https://image.tmdb.org/t/p/w1280{{movie.backdrop}})'}"}

Which results in,

<div class="movie-background" ng-style="{'background-image':'url(https://image.tmdb.org/t/p/w1280/lXOqBOcx1t5A3YhJEIfJZOkigwH.jpg)'}" 
style="background-image: url(&quot;https://image.tmdb.org/t/p/w1280/nbIrDhOtUpdD9HKDBRy02a8VhpV.jpg&quot;);">

So it creates a ng-style, and a normale style attribute for the element.

The problem is that when I fire the updateSelectedMovie(movie) the ng-style attribute gets updated with a new url, but the style attribut does not get changed.

<div class="movie-background" ng-style="{'background-image':'url(https://image.tmdb.org/t/p/w1280/15PbZtjRJ4zgQA8XS0otL70piQi.jpg)'}" 
style="background-image: url(&quot;https://image.tmdb.org/t/p/w1280/nbIrDhOtUpdD9HKDBRy02a8VhpV.jpg&quot;);">

Any ideas why the ng-style gets updated, but the other style does not?

Upvotes: 0

Views: 214

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

There is not need to use {{}} inside ng-style, use + for string concatenation while concatenating scope variable inside ng-style expression.

.movie-background{"ng-style" => 
      "{'background-image':'url(https://image.tmdb.org/t/p/w1280' + movie.backdrop +')'}"}

Upvotes: 1

Related Questions