एक यूट्यूब AngularJS निर्देशक

Question

बनाएं मैं यूट्यूब वीडियो एम्बेड करने के लिए निम्नलिखित AngularJS निर्देश बनाया:

// 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>' 
    }; 
}); 

जब मैं इसे अपने टेम्पलेट <youtube code="r1TK_crUbBY"></youtube> से कहते हैं, मैं निम्नलिखित त्रुटि मिलती है:

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

मैं कर सकते हैं {{code}} अभिव्यक्ति में निर्देश के साथ क्या गलत है पहचान नहीं है।

Answer 1

कोणीय 1.2 के साथ, आपको और trustAsResourceURLsrciframe के इंजेक्ट करने की आवश्यकता है।

डेमो: 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); 
      } 
     }); 
    } 
    }; 
}); 

यह भी देखें: Migrate from 1.0 to 1.2 और related question।