angularjs директива для YouTube видео в IFRAME

Question

Я создал директиву, чтобы добавить Youtube видео, название и описание

Название и описание работы тонкой, но я не могу видео работать.

Не найдено Невозможно интерполировать: {{video}} Ошибка: [$ sce: insecurl] Заблокированный ресурс загрузки из URL-адреса, который не разрешен политикой $ sceDelegate. URL: https://www.youtube.com/embed/oHg5SJYRHA0

Я попытался с помощью

scope.video = $sce.trustAsResourceUrl(attrs.video); 

, но до сих пор нет удачи

я есть plunker пример

http://plnkr.co/edit/EVGnYYdVR5Q5BWEsQVrl?p=preview

Любые идеи?

Спасибо

Answer 1

Использование изолированной сферы с @ обязательными video перезаписывает настройку video свойства в вашей функции связи. Ссылка выполняется только один раз до применения привязок. Вы можете использовать $observe, чтобы установить доверенное значение URL-адрес, и это будет работать даже при изменении значения (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); 
     }) 
    } 
    }; 
}); 

Answer 2

Вы можете использовать фильтр, как:

Plunker

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