javascript - 我想从 Controller 绑定(bind) iframe 的 src

Question

我想设置src的 iframe使用 Angular Controller 的标签。那么我的来源需要先通过过滤器。像下面这样的东西

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

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

现在我想要的是单击以下 div，<iframe> 的 src以上应与过滤器一起设置。

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

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

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

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

Answer 1

哦，根本不要使用 jQuery!使用 ng-if 显示 iFrame - 并在 Controller 内使用 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>