javascript - Angular JS-尝试创建视频选择器 "angular way"

Question

我的页面包含多个视频的链接。视频缩略图显示在列表中，当您单击其中一个缩略图时，该视频会在顶部的常用视频播放器中播放。

如果我在 jQuery 中执行此操作，我将有一个单击事件，该事件会获取链接上存储的数据属性上的视频 ID，并使用此视频 ID(重新)创建视频播放器并显示公共(public)播放器，它如果尚未显示。

但是，我正在尝试以“Angular 方式”来做到这一点。一种方法可能是添加一个 $scope.showVideo 点击处理程序来完成所有这些操作。

但似乎我应该在指令中执行此操作，因为 DOM 操作应该在指令中完成......

那么，我是否应该将此指令放在普通视频播放器上？那么它能做什么呢？

如果有人有任何想法，我只是在寻找一个高级架构计划来做到这一点。

谢谢。

Answer 1

这听起来绝对像是指令的工作。您可以创建指令 <video:player>然后让它渲染缩略图和播放器的 html。

就传递视频列表而言，我发现了两种可行的方法。

1. 您可以使用ng-transclude嵌套<video:player:thumbnail>位于您的视频播放器指令下

2. 您可以根据 Controller 中作用域上的数据集传入一个参数: $scope.thumbnails = [{image: 'image1', path: '/video1.mp4'}, ...]

   为了你的指示 <video:player thumbs="thumbnails">

现在，就选择要播放的内容而言，您只需在缩略图上输出 ng-click

<a href="" ng-click="load_video(thumb.path)"><image src="thumb.image"></image></a>`

加载视频可以简单地在范围上设置一个“current_video_path”，然后在播放器本身中使用:

<video>
    <source src="current_path">
</video>

您还可以在指令中初始化当前路径来设置要播放的默认视频。