在指令中插入来自 ng-repeat 的输出

Question

我有一个模板，我在其中重复了 $scope.trailers 中的预告片对象，并添加了一个 angular 指令，用于在模板中创建嵌入的 youtube 播放器，

.container-info
  .trailers
  %ul.trailers
    %li{"ng-repeat" => "trailer in trailers | filter: { movie_id: movie.movie_id}"}
      {{ trailer.link }}

  .container-trailers
    %youtube{:videoid => "M7lc1UVf-VE"}

正如您现在所看到的，我将M7lc1UVf-VE 的值设置为videoid。我想做的是得到第一个{{ trailer.link }} 的结果并将其插入videoid。

想要的结果应该是这样的，

<div class="container-info">
  <ul class="trailers">
    <li>ePbKGoIGAXY</li>
    <li>KlyknsTJk0w</li>
    <li>nyc6RJEEe0U</li>
    <li>zSWdZVtXT7E</li>
    <li>Lm8p5rlrSkY</li>
  </ul>
  <div class="container-trailers">
    <youtube videoid="ePbKGoIGAXY"></youtube
  </div>
</div>

我怎样才能达到这样的结果？

这是 youtube 指令，

app.directive('youtube', function($window, youTubeApiService) {
  return {
    restrict: "E",
    scope: {
      videoid: "@"
    },
    template: '<div></div>',
    link: function(scope, element, attrs, $rootScope) {
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;

      youTubeApiService.onReady(function() {
        player = setupPlayer(scope, element);
      });

      function setupPlayer(scope, element) {
        return new YT.Player(element.children()[0], {
          playerVars: {
            autoplay: 0,
            html5: 1,
            theme: "light",
            modesbranding: 0,
            color: "white",
            iv_load_policy: 3,
            showinfo: 1,
            controls: 1
          },
          videoId: scope.videoid,
        });
      }

      scope.$watch('videoid', function(newValue, oldValue) {
        if (newValue == oldValue) {
          return;
        }
        player.cueVideoById(scope.videoid);

      });
      console.log ('youtube player directive')
    }
  };
});

它将videoid 作为变量。

* 附加但相关的问题 *

是否可以单击 a 或其他元素以获取该元素的值，并将其传递给 videoid 范围，以便更新 youtube videoid？

<div class="container-info">
  <ul class="trailers">
    <li><a href="#">ePbKGoIGAXY</a></li>
    <li><a href="#">KlyknsTJk0w</a></li>
    <li><a href="#">nyc6RJEEe0U</a></li> <-- clicked element
    <li><a href="#">zSWdZVtXT7E</a></li>
    <li><a href="#">Lm8p5rlrSkY</a></li>
  </ul>
  <div class="container-trailers">
    <youtube videoid="nyc6RJEEe0U"></youtube> <-- updated value of videoid
  </div>
</div>

Answer 1

在通过movie.movie_id 过滤呈现li 时，我们将创建一个新数组，该数组将仅具有名为filteredTrailers 的过滤值。然后我们将通过执行filteredTrailers[0].link 从过滤后的数组中获取第一个值，这将为您提供第一个对象的链接，并且此值将通过{{}}（插值）传递给videoid 属性，因为指令具有@（单向绑定）。

标记

.container-info
  .trailers
  %ul.trailers
    %li{"ng-repeat" => "trailer in filteredTrailers = (trailers | filter: { movie_id: movie.movie_id})"}
      {{ trailer.link }}

  .container-trailers
    %youtube{:videoid => "{{filteredTrailers[0].link}}"}