I created a directive to add a youtube video, title and description
Title and description work fine but i cant the video to work.
Not Found Can't interpolate: {{video}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: https://www.youtube.com/embed/oHg5SJYRHA0
I tried using
scope.video = $sce.trustAsResourceUrl(attrs.video);
but still no luck
i have plunker example
http://plnkr.co/edit/EVGnYYdVR5Q5BWEsQVrl?p=preview
Any ideas?
Thank you
Using an isolated scope with the @ binding on video overwrites your setting of the video property in your link function. Link only executes once before the bindings are applied. You can use $observe to set the trusted url value and that will work even when the value is changed (plnkr):
app.directive('youtubeHelp', function($sce) {
return {
restrict: 'AE',
scope: { header:'@' },
transclude: true,
replace: true,
template: '<div class="well"><h2>{{header}}{{video}}...</h2></div>',
link: function (scope, element, attrs) {
scope.header = attrs.header;
attrs.$observe('video', function(value) {
scope.video = $sce.trustAsResourceUrl(value);
})
}
};
});
You can use a filter like:
app.filter('trustUrl', function($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
});
app.directive('youtubeHelp', function() {
return {
restrict: 'AE',
scope: {
header: '@',
video: '@'
},
transclude: true,
replace: true,
template: '<div class="well"><iframe ng-src="{{video | trustUrl}}"></iframe></div>',
link: function(scope, element, attrs) {
scope.header = attrs.header;
}
};
});
