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

通过li过滤呈现movie.movie_id，我们将创建一个新数组，该数组只有名为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}}"}

在指令

1 个答案: