使用库（Plyr）与指令和AngularJS

我想用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>

我试图创建一个指令：

(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>

来源

2016-06-21 Jérémie Chazelle

您需要在link函数中初始化指令中的Plyr。像这样的东西应该工作：

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

})();

来源

2016-06-21 17:16:20 dmackerman

使用库（Plyr）与指令和AngularJS

回答

相关问题