Angularjs - использовать URL в угловой переменной в качестве встроенного источника YouTube

Question

В моем интерфейсе углового приложения есть следующий код

  <iframe ng-hide="entry.videoLocation == null" width="560" height="315"
     ng-src="{{entry.videoLocation}}" frameborder="0" allow="autoplay; encrypted-media"
     allowfullscreen></iframe>
  <li>VL: {{entry.videoLocation}}

По сути, в некоторых случаях entry.videoLocation содержит URL-адрес для встраивания видео на YouTube. Я хотел бы добавить это видео на мою страницу, если оно установлено, и не вставлять видео, если оно пустое.

Когда переменная установлена, на моей странице появляется тег iframe, а URL-адрес печатается в теге li, как и ожидалось, и оба из них отсутствуют, когда он нулевой.

Однако атрибут src тега iframe всегда отсутствует. Я пытался вызвать атрибуты src и ng-src, но безрезультатно.

Кто-нибудь знает, почему это не рендеринг?

Answer 1

я думаю, что это поможет вам, не только для видео, но и для PDF,

<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
                height: iframeHeight * 0.75 + 'px'
            }" style="width:100%"></iframe>

здесь trustThisUrl - это просто фильтр,

angular.module("deck").filter('trustThisUrl', ["$sce", function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

Answer 2

Попробуйте: -

<iframe ng-hide="entry.videoLocation == null" width="560" height="315"
     ng-src="entry.videoLocation" frameborder="0" allow="autoplay; encrypted-media"
     allowfullscreen></iframe>
  <li>VL: {{entry.videoLocation}}