HTMLがレンダリングされた後にiFrameが初期化されたときにsrcをロードしない

Question

したがって、iFrameにどのムービー/セリがクリックされたかに基づいてYouTubeの予告編を埋め込む必要があるページがあります。このため私はYoutube Search APIを使用します。

現在、ページが読み込まれると、別の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がすでに計算されているサービスを作成しようとしましたが、そこからURLを取得しようとしましたが、いずれかを助けるようです。

すべてのサポートをいただければ幸いです！

Answer 1

スコープされた変数（$ 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のイベントループを理解します。