Create a YouTube AngularJS Directive
angularjs, angularjs-directive, javascript, youtube
Solution
With Angular 1.2, you need to inject `$sce` service and `trustAsResourceURL` the `src` of an `iframe`.
Demo: http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview
.directive('youtube', function($sce) {
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="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
link: function (scope) {
scope.$watch('code', function (newVal) {
if (newVal) {
scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
}
});
}
};
});
Also see: Migrate from 1.0 to 1.2 and related question.
Problem
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.