我要从控制器绑定iframe的src。

Question

我想用角度控制器来设置src标签的iframe。我的源需要先通过一个过滤器。如下所示

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

youtubeEmbedUrl是一个过滤器。我们别谈这个了。

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

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

我认为混合jQuery可以完成角控制器内部的任务。这是我在控制器内的失败尝试。

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

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

Answer 1

哦，根本不用jQuery！使用ng-if显示iFrame -并在控制器内使用do您的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>