Angular JS- trying to create video selector the "angular way"

Question

I have a page that has links to multiple videos. Video thumbnails are displayed in a list, and when you click on one of them, that video plays in the top, common video player.

If I were doing this in jQuery, I'd have a click event that grabs the video id on a data attribute stored on the link and (re)create the video player with this video id and show the common player, it if it's not already shown.

However, I'm trying to do this the "angular way". One way might be to add a $scope.showVideo click handler that would do all of this.

But it seems like I should perhaps do this in a directive, since DOM manipulation should be done in directives....

So, do I put this directive on the common video player? What, then, might it do?

I'm just looking for a high-level architecture plan to do this if anyone has any ideas.

Thanks.

xdotcommer · Accepted Answer · 2013-12-20 20:00:32Z

This definitely sounds like the job for a directive. You could create a directive <video:player> and then have it render the html for the thumbnails and the player.

As far as passing the list of videos, I've found two ways that work.

You can use ng-transclude to nest <video:player:thumbnail>s under your video player directive
You could pass in an argument based on data set on the scope in your controller: $scope.thumbnails = [{image: 'image1', path: '/video1.mp4'}, ...]

And for your directive <video:player thumbs="thumbnails">

Now as far as picking what to play, you can simply output an ng-click on the thumbnails

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

Load video could simply set a "current_video_path" on the scope that is then used in the player itself:

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

You can also initialize the current path in your directive to setup the default video to play.

Collectives™ on Stack Overflow

Angular JS- trying to create video selector the "angular way"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related