Question

我正在使用角度和ui-router来模仿我的模板。

这是此部分的路由

.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',{
  url: '',
  views: {
    "youtube_trailer":{
      templateUrl: '../assets/angular-app/templates/_container-trailer.html'
    }
  }
})

加载home.container-big状态后，会将__movie-info.html.haml模板注入container-big视图。

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

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

此模板有另一个模板注入，当用户点击Load trailer时，它会加载home.container-big.container-big-trailer状态，并在_container-trailer.html.haml视图中注入模板youtube_trailer。

%youtube{:videoid => "value from clicked link"}

我想要做的是当用户点击Load template时，将<a href>模板中点击的_movie-info的值传递到_container-trailer模板。

这是一个更清晰的例子，

_movie-info.html.haml模板，

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

<div ui-view="youtube_trailer"></div> <-- here the _container-trailer is injected

_container-trailer.html.haml

<youtube videoid="Lm8p5rlrSkY"></youtube>

Answer 1

在州定义中声明一个参数：

$stateProvider.state(..., {
    params: {
        value: null
    }
});

然后您可以使用ui-sref发送可选参数：

<a value="KlyknsTJk0w" ui-sref=".container-big-trailer({value: KlyknsTJk0w})">Load trailer</a>

现在，如果您将$stateParams注入控制器并检索您的值：

function ($scope,   $stateParams) {
    $scope.value = $stateParams.value;
}

参考： https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

实施例： http://plnkr.co/edit/bSy6ezIJZshKSFFs298M?p=preview

Answer 2

使其成为状态的一部分并将参数分配给控制器作用域（或控制器实例，如果您使用“控制器作为”）

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

然后您的_container-trailer.html可以使用

<youtube videoid="{{videoId}}"></youtube>

你传递了这样的参数

<a ui-sref=".container-big-trailer({videoId: 'Lm8p5rlrSkY'})">Load trailer</a>

通过模板

2 个答案: