通过模板传递值

Question

我在模板中使用 angular 和 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 状态并在youtube_trailer 视图中注入模板_container-trailer.html.haml。

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

我想要做的是当用户点击Load template 时，将从_movie-info 模板点击的<a href> 的值传递给_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

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

.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>