CODEWITHSUNDEEP
javascriptjqueryangularjsiframe
bibliophilsagar
bibliophilsagar

Reputation: 1753

i want bind src of an iframe from controller

I want to set src of an iframe tag using angular controller. Well my source is need to be passed through a filter first. Something like this below

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

youtubeEmbedUrl is an filter. Let's not come to that.

Now what i want is upon ng-click of the following div, the src of <iframe> above should be set along with the filter.

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

I thought mixing jQuery for accomplishing the task inside angular controller. So here is my unsuccessful attempt inside the controller.

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

videoUrl contains url of the video i want to play. Any help would be great.

Upvotes: 1

Views: 596

Answers (1)

tymeJV
tymeJV

Reputation: 104775

Oh, do not use jQuery at all! Use an ng-if to display the iFrame - and use do your filter inside the controller:

$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
}

And the HTML:

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

Upvotes: 3

Related Questions