0

Есть список видео в json, где указано имя и url на iframe с ютуба. Как правильней вывести, чтобы iframe корректно отображался?

вот мой код json:

{
"name":"Серия 1",
"iframe":"<iframe width='560' height='315' src='https://www.youtube.com/embed/8iWNE5_9d_U' frameborder='0' allowfullscreen></iframe>"}

вот разметка:

<div class="col-md-3" data-ng-repeat="seria in videos">
    {{seria.iframe}}
    <p class="text-center">
        {{seria.name}}
    </p>
</div>

вот собственно контроллер:

(function(){
'use strict';

angular.module('MainApp').controller('HomeCtrl', HomeCtrl);

HomeCtrl.$inject = ['$scope','$http'];
function HomeCtrl($scope, $http){
    $http({method:'POST', url:'json/mainvideo.json'})
        .success(function (data) {
            $scope.videos = data;
        });
    $scope.title = 'Главная';
};})();

Требуется вывести фрейм, чтобы он отображался как элемент, а не текст. Пробовал хранить только ссылку и вкинуть её во фрейм в атрибут src="{{video.url}}", но эта конкатенация не работает корректно, пробовал с бубном танцевать src="'+{{video.url}}+'" но не помогло х( может есть паттерн для этого?

Может это решается с помощью фильтров? ng-src="{{video.url}}" не работает, почему без понятия, может оно только для Img

2
  • смотрите bind-html и сервис $sce
    – Grundy
    8 фев 2016 в 8:25
  • спасибо, ознакомлюсь
    – Increment
    8 фев 2016 в 21:04

1 ответ 1

1

Для вставки сырого html на страницу в ангуляре есть директива ng-bind-html, а так же сервис $sce

Чтобы показать что данный html не нужно экранировать можно использовать метод trustAsHtml

И лучше всего его применять сразу после получения данных.

В примере ниже для удобства был добавлен фильтр trustAsHtml, который просто вызывает соответствующий метод сервиса $sce

.filter('trustAsHtml', ['$sce',
    function($sce) {
        return function(html) {
            return $sce.trustAsHtml(html);
        }
    }
])

Пример:

(function() {
  'use strict';

  angular.module('MainApp', []).controller('HomeCtrl', HomeCtrl).filter('trustAsHtml', ['$sce',
    function($sce) {
      return function(html) {
        return $sce.trustAsHtml(html);
      }
    }
  ]);

  HomeCtrl.$inject = ['$scope', '$http'];

  function HomeCtrl($scope, $http) {
    var data = [{
      "name": "Серия 1",
      "iframe": "<iframe width='560' height='315' src='https://www.youtube.com/embed/8iWNE5_9d_U' frameborder='0' allowfullscreen></iframe>"
    }];
    $scope.videos = data;
    $scope.title = 'Главная';
  };


})();
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="MainApp" ng-controller="HomeCtrl">
  <div data-ng-repeat="seria in videos">
    <div ng-bind-html="seria.iframe| trustAsHtml"></div>

    <p class="text-center">
      {{seria.name}}
    </p>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.