Directive custom control

Issue

I am trying to create a directive as custom video control. I loading an html file to templateUrl of this directive. The problem is when there are more than one controls, they have the same src file set to all of them and they are sharing state of video as well. When I pause from another control, it pauses video being played on 1st control. Here is directive template that I am using:

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();
      }
   }
}
});

Will greatly appreaciate if anyone can point out if I am doing anything wrong here.

Thanks.

Solution

It looks like the problem you are having is that you are looking up the element by tag name. Basically, every element in your dom with the tag <video> is going to be effected by any use of your directive.

The idea with directives, is that they provide direct access to the element that the directive was assigned. In your case element inside the link function parameters. So you need to reference the individual associated elements like this:

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

If you have assigned the directive on a parent element, and want all children, then use the find() jqLite function on the directive element:

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

Answered By - Matt Way