使用ui-router

Question

我有一个这样的模板，

.container-info
  %ul.trailers
    %li{"ng-repeat" => "trailer in filteredTrailers = (trailers | filter: { movie_id: movie.movie_id})"}
      %a{:href => "#", "ui-sref" => ".container-big-trailer({value: '{{ trailer.link }}'})"} {{ trailer.link }} Load trailer

  .container-trailers
    %div{"ui-view" => "youtube_trailer"}

a元素加载我的预告片状态，以便将我的模板注入youtube_trailer视图。但是一部电影可以有多个预告片，但是当我点击第二个预告片时，由于状态已经全部加载，所以没有任何事情发生。

这就是我的路由现在的样子，

.state('home.container-big',{
  url: '',
  views: {
    "container-big":{
      templateUrl: '../assets/angular-app/templates/_movie-info.html',
      controller: 'addMovieCtrl'
    }
  }
})

.state('home.container-big.container-big-trailer',{
  params: {
    value: null
  },
  url: '',
  views: {
    "youtube_trailer":{
      templateUrl: '../assets/angular-app/templates/_container-trailer.html',
      controller: function($scope, $stateParams) {
        $scope.value = $stateParams.value;
      }
    }
  }
})

一个小的html示例，使其更清晰，

_movie-info.html.haml模板，home.container-big州，

首先点击，

<div class="container-info">
  <ul class="trailers">
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li> <-- clicked element
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
  </ul>
</div>

<div ui-view="youtube_trailer"></div> <-- Loads this state `home.container-big.container-big-trailer` which injects the template into the `youtube_trailer` view.

第二次点击，

<div class="container-info">
  <ul class="trailers">
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li> <-- clicked element
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
    <li><a href="#", ui-sref=".container-big-trailer">Load trailer</a></li>
  </ul>
</div>

<div ui-view="youtube_trailer"></div> <-- this state should be reloaded.

我尝试添加$state.go，但我可以弄清楚正确的值应该是什么。

 controller: function($scope, $stateParams, $state) {
   $scope.value = $stateParams.value;
   $state.go('home.container-big.container-big-trailer', 
   $stateParams, {reload: 'container-big-trailer'});
 }

Answer 1

您需要使用transitionTo：

$state.transitionTo('state-name', $stateParams, {reload: true});