视图不会更改背景图片

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-details元素中的_movie-info.html模板。

这工作正常。

在这种_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-风格，并为元素的师范样式属性。

问题是，当我启动updateSelectedMovie(movie)ng-style属性获取更新一个新的url，但样式attribut不会更改。

<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 +')'}"}