Как вставить iframe с помощью angular.js с помощью $ sce?

Question

Я пытаюсь вставить весь iframe и вывести его в html. Причина, по которой это должен быть iframe, состоит в том, что у меня есть функция, которая обрабатывает несколько видеороликов, таких как youtube, vine и многое другое - и у всех есть разные теги.

Так что я хотел бы сделать это следующим образом:

Вход:

var html = '<iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>'; 

$scope.video_element = $sce.trustAsHtml(html); 

и на контроллере:

<div ng-bind-html="video_element"></div> 

Я хотел бы iframe для вывода в целом внутри div. Много раз он просто выводит n '[объект HTMLIFrameElement], а не фактический iframe. Может ли кто-нибудь вести меня в правильном направлении, пожалуйста? Планк был бы потрясающим.

Спасибо.

Answer 1

Я бы предложил использовать для этого директиву, поэтому AngularJS рекомендует прикреплять особые элементы к элементам DOM.

Я создал Plunkr с решением, проверьте это: iframe from a directive.

Сообщите мне, если это решит вашу проблему.

app.directive('iframeDirective', ['$sce', function($sce) { 
return { 
    restrict: 'E', 
    template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>', 
    link: function(scope) { 
     scope.trustedUrl = $sce.trustAsResourceUrl("//www.youtube.com/embed/dQw4w9WgXcQ"); 
    } 
    } 
}]); 

Answer 2

Для этого вам понадобится специальная директива.

app.directive('mySrc', ['$sce', function($sce) { 
    return function(scope, element, attr) { 
     scope.$watch($sce.trustAsUrl(attr.mySrc), function(value) { 
      $(element).attr({src: attr.mySrc || ''}); 
     }); 
    }; 
}]) 

А потом

<iframe my-src="//www.youtube.com/embed/dQw4w9WgXcQ"></iframe> 

Answer 3

В моем случае это работало для меня, пользовательский фильтр

app.filter('iframe', ['$sce', function($sce) { 
return function(input) { 
     input = $sce.trustAsResourceUrl(input); 
     return input; 
    }; 
}]);