当HTML呈现后初始化时iFrame不加载src

因此，我有一个页面，我需要根据视图中点击了哪部电影/ serie，将iTube预告片嵌入到iFrame中。为此，我使用Youtube Search API。当HTML呈现后初始化时iFrame不加载src

现在，当页面加载时，它首先从另一个API获取一些数据，加载Youtube API，然后获取预告片的videoId，并将其分配给视图中的$scope变量。

在我刚拿到这段代码的观点：

<div class="row"> 
    <iframe width="420" height="315" ng-src="{{video}}" frameborder="0" allowfullscreen></iframe> 
</div>

而且控制器看起来是这样的：

var serieId = $routeParams.id; 

    $http.get("http://api.tvmaze.com/shows/" + serieId) 
     .success(function (data) { 
      console.log(data); 
      $scope.name = data.name; 
      $scope.img = data.image.medium; 
      $scope.rating = data.rating; 
      initYTAPI(); 
      $http.get("http://api.tvmaze.com/shows/" + serieId + "/episodes") 
       .success(function (episodes) { 
        console.log(episodes); 
        $scope.episodes = episodes; 
        var maxSeason = 0; 
        for (var i = 0; i < episodes.length; i++) { 
         if (episodes[i].season > maxSeason) { 
          maxSeason = episodes[i].season 
         } 
        } 

        $scope.seasonCount = []; 
        for (var i = 1; i <= maxSeason; i++) { 
         $scope.seasonCount.push(i) 
        } 
       }); 
     });

而且initYTAPI功能：

gapi.client.setApiKey("MY_API_KEY"); 
    gapi.client.load("youtube", "v3", function(){ 
     //yt api is ready 
     console.log("Api ready"); 
     var query = $scope.name + " Official Trailer"; 
     var request = gapi.client.youtube.search.list({ 
      part: "snippet", 
      type: "video", 
      q: query, 
      maxResults: 1 
     }); 
     request.execute(function(response){ 
      var base_URL = "https://www.youtube.com/embed/"; 
      var url = base_URL + response.items[0].id.videoId; 
      url = $sce.trustAs($sce.RESOURCE_URL, url); 
      console.log(url); 
      $scope.video = url; 

      //Tried to do it with ng-bing-html aswell 
      //$scope.trailerHtml = "<iframe width=\"420\" height=\"315\" ng-src=\"url\" frameborder=\"0\" allowfullscreen></iframe>"; 
     }); 
    });

我我已经用开发者模式检查了页面，看看iFrame是否正确加载，但它确实似乎不包含任何src（或ng-src）属性。

我认为它与javascript执行前的视图渲染有关，但我试图做一个服务，其中的URL已经预先计算，并从那里得到的网址，但没有似乎也有帮助。

所有帮助将不胜感激！

来源

2016-06-15 Bas Pauw

您的作用域变量（$ scope.video）在Angular的事件循环之外执行。您可以设置$ scope.video（BAD）手表，或包裹在$范围自定义范围变更申请$（）：

 request.execute(function(response){ 
     var base_URL = "https://www.youtube.com/embed/"; 
     var url = base_URL + response.items[0].id.videoId; 
     url = $sce.trustAs($sce.RESOURCE_URL, url); 
     console.log(url); 
     $scope.$apply(function(){ 
      $scope.video = url; 
     });

Here's a quick read更好地理解角1.3的事件循环。

来源

2016-06-15 06:15:56 eschie

当HTML呈现后初始化时iFrame不加载src

回答

相关问题