Question

26

Create a YouTube AngularJS Directive

rated 0 times [ 31] [ 5] / answers: 1 / hits: 16499 / 11 Years ago, sat, december 7, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maureen

Add To Favorites

Follow

Total Points: 151

Total Questions: 110

Total Answers: 110

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

answered 11 Years ago margob · Accepted Answer

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.