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="https://embed.twitch.tv/embed/v1.js"></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);'
'</script>';
var scriptElem = document.createElement(script);
scriptElem.attr("src", "https://player.twitch.tv/?autoplay=false&video=v165913358&t=15707s"); // set var appropriately
element.append(scriptElem);
}
};
};
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!