How to embed Twitch player via AngularJS directive?

Hello everyone,

I’m a coding n00b struggling with embedding Twitch on AngularJS.

From my research, it seems like creating a directive and using angular.element is the way to go but now i’ve been stuck at that point for a while.

Here’s my directive function code below:

function testDirective() {

          return {
            restrict: 'EA',
            scope: {
              data: '='
            template: '<script src=""></script> <div id="twitchemb"></div>',
            link: function($scope, iElm, iAttrs) {
              var script = '<script type="text/javascript">'
                  'var options = {'
                    'width: 854,'
                    'height: 480,'
                'var player = new Twitch.Player("twitchemb", options);'

              var scriptElem = document.createElement(script);
              scriptElem.attr("src", ""); // set var appropriately

I think this snippet is not entirely non sense… but don’t hesitate to let me know if it is hehe.

When I run it, I get 0 display from the directive and this error gets logged in the Firefox console:

It’d be amazing if anyone could shed a little light here!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.