0

The code snippet below is used to embed Youtube video in my page.

<div ng-if="videoUrl != ''" style="height:400px;">
    <iframe width="100%" height="100%" src="{{videoUrl}}"></iframe>
</div>

In my controller, videoUrl is first set to an empty string, and updated once data is retrieved from server.

$scope.videoUrl = '';

videoService.getData().then(function(response) {
    $scope.videoUrl = response.videoUrl;
});

The Youtube player works and the URL is correct, I can watch the video with the embeded player after the page is fully loaded. What bothers me is each time when loading the page, an error is returned. I can see from the browser console that it was trying to send a GET request to http://www.example.com/%7B%7BvideoUrl%7D%7D with its status as (canceled). This request is not something I want and it fails for sure.

How can I get rid of that weird GET request?

S.C.
  • 900
  • 1
  • 13
  • 39
  • 2
    I would imagine that when the DOM is rendered, `$scope.videoUrl` is not actually empty, but undefined. Try using a falsey test instead: `ng-if="videoUrl"`. Also, you might need to use `ng-src` rather than simply `src`. Have a look at [this](http://stackoverflow.com/questions/20045150/angular-js-how-to-set-an-iframe-src-attribute-from-a-variable) answer – CodingIntrigue Feb 02 '15 at 08:38
  • Thanks, your suggestion works. Would you post an answer for this question? – S.C. Feb 02 '15 at 08:49
  • It's better if you post your own answer, you'll know exactly what you changed and what references you used :) – CodingIntrigue Feb 02 '15 at 08:50

1 Answers1

1

I modified my code based on RGraham's suggestion and the error is gone now.

First, change src to ng-src and the checking condition to ng-if="videoUrl".

<div ng-if="videoUrl" style="height:400px;">
    <iframe width="100%" height="100%" ng-src="{{videoUrl}}"></iframe>
</div>

Second, I initialize videoUrl to undefined.

$scope.videoUrl = undefined;

Now the page loads without sending the previous weird GET request anymore.

S.C.
  • 900
  • 1
  • 13
  • 39