在不刷新页面的情况下将Youtube视频嵌入Angular JS的问题

Posted 2021-04-09

我正在一家电子商务网站上工作，试图为用户增加在产品详细信息页面上为其产品添加youtube视频的能力。 除了在页面刷新后才显示视频的事实之外，我还使用了代码。 我以为这将是一个相当简单的项目，但是我无法弄清楚如何使其能够正确加载iframe而无需刷新页面。 这是我现在的角度代码：

controller("ProductDetailCtrl", function ($sce, productData, $scope, CartModel, $interval, $rootScope, EmailShareModel, $state, $location, $anchorScroll) {
    var detail = this;


    detail.product = productData;
    detail.product.videohtml = "";
    if (productData.video !== null) {
      detail.product.videoHtml = $sce.trustAsHtml('<iframe width="560" height="315" src="' + productData.video + '" frameborder="0" allowfullscreen></iframe>');
    }

而我的HTML：

<div ng-if ="detail.product.videoHtml" ng-bind-html="detail.product.videoHtml"></div>

如您所见，我只是将作为iframe的html绑定到视图。 控制器正在从我的rails api获取一个json对象，其中包含所有产品数据。 productData.video为null或设置为包含youtube网址的字符串。 即https://www.youtube.com/embed/ANmmpnaWDto我也尝试将ng-src与html中的iframe一起使用，但是我总是遇到相同的问题，需要刷新。 谁看过这个吗？