0

関数を呼び出すテンプレートがあり、ディレクティブ要素があります。

.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 style 属性が作成されます。

問題は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はありますか?

4

1 に答える 1

1

{{}}内部ng-styleで使用する必要はありません。式内+でスコープ変数を連結する際の文字列連結に使用しますng-style。

.movie-background{"ng-style" => 
      "{'background-image':'url(https://image.tmdb.org/t/p/w1280' + movie.backdrop +')'}"}
于 2016-01-16T18:33:07.120 に答える