我想从控制器绑定 iframe 的 src

Question

我想使用角度控制器设置iframe 标签的src。 那么我的来源需要首先通过过滤器。下面是这样的

<iframe ng-src="{{source| youtubeEmbedUrl}}">
</iframe>

youtubeEmbedUrl 是一个过滤器。我们不要谈这个。

现在我想要的是在 ng-click 以下 div 时，上面的 <iframe> 的 src 应该与过滤器一起设置。

<div ng-click="playVideo($index, video)">{{clickable_text}}</div>

我想混合 jQuery 来完成 Angular 控制器中的任务。所以这是我在控制器内部的不成功尝试。

$("#id_of_the_iframe_div").html('<iframe ng-src="{{'+videoUrl+' | youtubeEmbedUrl}}"></iframe>');

videoUrl 包含我要播放的视频的 url。 任何帮助都会很棒。

Answer 1

哦，不要使用 jQuery！使用 ng-if 显示 iFrame - 并在控制器内使用 filter：

$scope.playVideo = function(index, video) {
    //Obviously some other stuff happens here
    //The jist is - do your logic in here to get your source
    //Trigger a variable to show the iframe
    $scope.showVideo = true; //for showing the iFrame
    $scope.videoUrl = $filter('youtubeEmbedUrl')($scope.videoUrl); //Dont forget to inject $filter in your controller
}

还有 HTML：

<iframe ng-if="showVideo" ng-src="{{videoUrl}}"></iframe>