视图不改变背景图像

Question

我有一个模板，我在其中调用了一个函数，并且有一个指令元素，

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

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

函数在指令中，

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;
  }
}

如您所见，我将 MovieRowCtrl 设置为 .container-wrapper 的控制器。

因此，当 updateSelectedMovie(movie) 函数触发时，它将 $scope.rowActive 设置为 true（显示元素），并将 _movie-info.html 模板注入 %movie-details 元素。

这很好用。

在那个 _movie-info.html 模板中我有这个，

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

结果是，

<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;);">

所以它为元素创建了一个 ng-style 和一个 normale 样式属性。

问题是，当我触发 updateSelectedMovie(movie) 时，ng-style 属性会更新为新的 url，但样式属性不会更改。

<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;);">

知道为什么 ng-style 得到更新，而另一个 style 没有更新吗？

Answer 1

不需要在ng-style中使用{{}}，在ng-style表达式中连接范围变量时使用+进行字符串连接。

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

视图不改变背景图像

view does not change background image

css

angularjs

ng-style