Angular JS- "각도 방식"으로 비디오 선택기를 만들려고합니다

Question

여러 비디오에 대한 링크가있는 페이지가 있습니다. 동영상 미리보기 이미지가 목록에 표시되며, 동영상 미리보기 이미지 중 하나를 클릭하면 해당 동영상이 상단의 일반적인 동영상 플레이어에서 재생됩니다.

jQuery에서이 작업을 수행했다면 링크에 저장된 데이터 속성의 비디오 ID를 잡고이 비디오 ID를 사용하여 비디오 플레이어를 만들고 일반 플레이어를 표시하는 클릭 이벤트가 발생했습니다. 아직 표시되지 않은 경우

그러나 저는 이것을 "각도 방식"으로하려고합니다. 한 가지 방법은이 모든 작업을 수행하는 $ scope.showVideo 클릭 핸들러를 추가하는 것입니다.

그러나 DOM 조작이 지침에서 수행해야하기 때문에 나는 아마도, 지시문에서이 작업을 수행해야 것 같다 .... 그래서

, 나는 일반적인 비디오 플레이어에서이 지시어를 배치해야합니까? 그렇다면 무엇을 할 수 있을까요?

누구나 아이디어가있는 경우 고급 아키텍처 계획을 찾고 있습니다.

감사합니다.

Answer 1

확실히 이것은 지시어에 대한 작업과 비슷합니다. 지시문 <video:player>을 만든 다음 축소판 그림과 플레이어의 HTML을 렌더링하게 할 수 있습니다.

동영상 목록을 전달하는 한 두 가지 방법으로 작동합니다. $scope.thumbnails = [{image: 'image1', path: '/video1.mp4'}, ...]

그리고 당신의 지시문 :

1. 당신은

2. 당신은 컨트롤러의 범위에 설정 데이터를 기반으로 인수를 전달할 수있는 동영상 플레이어의 지시에 따라 중첩 <video:player:thumbnail>들 ng-transclude을 사용할 수 있습니다 이제 <video:player thumbs="thumbnails">

까지 따기로 무엇을

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

당신에게 : 재생, 당신은 단순히 출력 할

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

로드 비디오를 간단히 플레이어 자체에서 사용되는 범위에 "current_video_path"을 설정할 수 축소판에 NG 클릭 수 또한 지시문의 현재 경로를 초기화하여 재생할 기본 비디오를 설정할 수 있습니다.