Create a YouTube AngularJS Directive

I created the following AngularJS directive to embed youtube videos:

// A Simple youtube embed directive
.directive('youtube', function() {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="http://www.youtube.com/embed/{{code}}" frameborder="0" allowfullscreen></iframe>'
  };
});

When I call it from my template <youtube code="r1TK_crUbBY"></youtube>, I get the following error:

Error: [$interpolate:noconcat] Error while interpolating: http://www.youtube.com/embed/{{code}} Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. See http://docs.angularjs.org/api/ng.$sce

I can't identify what's wrong with the directive in the {{code}} expression.

Create a YouTube AngularJS Directive

1 Answers