視圖不會更改背景圖片

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