Question

我正在开发一个电子商务网站，并试图为用户添加在产品详细信息页面上为其产品添加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>

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

问题在Angular JS中嵌入Youtube视频而不需要页面刷新

0 个答案: