지침 사용자 지정 컨트롤

Question

사용자 지정 비디오 컨트롤로 지시문을 만들려고합니다. 이 지시어의 templateUrl에 html 파일을로드하고 있습니다. 문제는 둘 이상의 컨트롤이있는 경우 모두에 동일한 src 파일이 설정되어 있고 비디오의 상태도 공유하는 경우입니다. 다른 컨트롤에서 일시 중지하면 첫 번째 컨트롤에서 재생중인 비디오가 일시 중지됩니다. 여기에 내가 사용하고있는 지시어 템플릿이 있습니다 :

dApp.directive('myVideoControl', function(){ 
return { 
    scope: { 
     cameraUrl: '=vcCameraUrl' 
    }, 
    restrict: 'E', 
    templateUrl: './../../js/directives/myVideoControl.html', 
    link: function (scope, element, attrs) { 
     scope.playVideo = function(){ 
      var v = document.getElementsByTagName("video")[0]; 
      v.play(); 
     } 
     scope.pauseVideo = function(){ 
      var v = document.getElementsByTagName("video")[0]; 
      v.pause(); 
     } 
    } 
} 
}); 

내가 잘못하고있는 사람이 누구인지 지적 할 수 있다면 크게 도움이 될 것입니다.

감사합니다.

Answer 1

당신이 가지고있는 문제는 태그 이름으로 요소를 찾고 있다는 것입니다. 기본적으로 <video> 태그가있는 DOM의 모든 요소는 지침의 사용에 따라 영향을받습니다.

지시어를 사용하면 지시어가 지정된 요소에 직접 액세스 할 수 있습니다. 귀하의 경우에 element 링크 함수 매개 변수 안에. 그래서 당신은 다음과 같이 각각의 관련 요소를 참조해야합니다 당신은 부모 요소에 지시어를 지정하면

var v = element[0]; 
v.play(); 

, 모든 아이들이 원하는, 다음 지시어 요소에 find() jqLite 기능을 사용

var v = element.find('video')[0]; 
v.play(); 

Answer 2

 var v = document.getElementsByTagName("video")[0]; 

전체 페이지에서 첫 번째 비디오 태그를 선택합니다.

대신 템플릿 내부의 요소,

element.find('video')[0]