當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

回答

相關問題