2016-06-21 4 views
2

Я хотел бы использовать Plyr с AngularJS, но когда я устанавливаю plyr с AngularJS, Plyr не работаетИспользование библиотеки (Plyr) с директивой и AngularJS

Я должен включать в себя:

<html> 
<head> 
<link rel="stylesheet" href="https://cdn.plyr.io/1.7.0/plyr.css"> 

</head> 
<body> 

<script src="https://cdn.plyr.io/1.7.0/plyr.js"></script> 

<div id="plyr" data-type="youtube" data-video-id="bTqVqk7FSmY"></div> 

<script> 
var player = plyr.setup(document.querySelector('#plyr'), { 
    debug: true 
}); 

</script> 


</body> 
</html> 

I пытался создать директиву:

(function(){ 
    'use strict'; 

    angular.module('ngPlyr', []); 

    angular.module('ngPlyr').directive('plyr', function() { 
     return { 
      template: '<div id="plyr" data-type="youtube" data-video-id="bTqVqk7FSmY"></div>' 
     }; 
    }) 

})(); 

и

<div plyr></div> 

ответ

2

Вам необходимо инициализировать Plyr внутри вашей директивы в своей функции link. Что-то вроде этого должно работать:

(function(){ 
    'use strict'; 

    angular.module('ngPlyr', []); 

    angular.module('ngPlyr').directive('plyr', function() { 
     return { 
      template: '<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>', 
      link: function(scope, element, attrs) { 
       var player = plyr.setup(element, { debug: true }); 
      } 
     }; 
    }) 

})(); 
Смежные вопросы