AngelsJS-Render HTML-код для встраивания как макет

Я хотел бы спросить, я пытаюсь сделать простой код, который должен отображать код совместного использования YouTube, учитывая, что я использую ng-repeat для циклического ввода нескольких входов, но я не могу показаться чтобы получить правильный рендер вместо того, что у меня есть, это текст. Как я должен сделать его правильным HTML-выходом?AngelsJS-Render HTML-код для встраивания как макет

Ниже представлен файл plunkr, который я привел в качестве примера.

Спасибо

источник

2014-10-11 Kenny Yap

Fo этой цели я бы внести некоторые изменения и подход по-другому для вашего случая : Исправлено: http://plnkr.co/edit/COnvjvoaYV643oQ46p9B?p=preview

var app = angular.module('myApp', []);  

app.config(function($sceDelegateProvider) { 
    $sceDelegateProvider.resourceUrlWhitelist([ 
    'self', 
    'https://www.youtube.com/**' 
    ]); 
}); 

app.controller('videoController', ['$scope', 
    function MyCtrl($scope) { 

    $scope.product = { 
     name: 'some name', 
     description: 'some description', 
     media: [{ 
     src: 'pbuGSt3Hb8k' 
     },{ 
     src: 'y_o-ULSWWng' 
     }] 
    }; 

    $scope.getIframeSrc = function(src) { 
     return 'https://www.youtube.com/embed/' + src; 
    }; 
    } 
]);

HTML

<html ng-app="myApp"> 
<head> 
    <script src="https://code.angularjs.org/1.2.1/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller="videoController"> 
    <div ng-repeat="media in product.media"> 
    <div class="thumbnail"> 
     <div class="video-container"> 
     <iframe width="560" height="315" ng-src="{{getIframeSrc(media.src)}}" frameborder="0 " allowfullscreen></iframe> 
     </div> 
    </div> 
    </div> 
</body>  
</html>

источник

2014-10-11 11:04:47

использование нг-связывать-HTML, как это:

<body ng-app="videoGall"> 
     <div ng-controller="topicVideoCtrl"> 
      <div ng-repeat="video in videos"><div ng-bind-html="makeTrust(video.url)"></div> </div> 
     </div> 
     </body>

videoGall.controller('topicVideoCtrl', function ($scope, $http,$sce) { 
    $scope.makeTrust=function(html){return $sce.trustAsHtml(html);}; 
    $scope.videos = [ 
     {"url":"<iframe width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/pbuGSt3Hb8k\" frameborder=\"0\" allowfullscreen><\/iframe>"}, 
        {"url":"<iframe width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/y_o-ULSWWng\" frameborder=\"0\" allowfullscreen><\/iframe>"}]; 
});

источник

2014-10-11 09:54:18

AngelsJS-Render HTML-код для встраивания как макет

ответ

Смежные вопросы