渲染 HTML 后初始化时 iFrame 不加载 src答案

【问题标题】：iFrame doesn't load src when initialized after HTML is rendered渲染 HTML 后初始化时 iFrame 不加载 src
【发布时间】：2016-10-16 02:05:36
【问题描述】：

所以我有一个页面，我需要在 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，但这似乎没有也可以帮忙。

所有帮助将不胜感激！

【问题讨论】：

标签： javascript html angularjs iframe youtube-api

【解决方案1】：

您的作用域变量 ($scope.video) 在 Angular 的事件循环之外执行。您可以在 $scope.video (BAD) 上设置观看，或者将自定义范围更改包装在 $scope.$apply() 中：

       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 更好地理解 Angular 1.3 的事件循环。

【讨论】：