Angularjs src="{{url}} doesn't work in one file but works in another.

Question

I'm learning angular, and have this weird problem: my index includes:

<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>

And I have this code:

angular.module('myApp.directives', []).directive('myYoutube', function($sce) {
return {
    restrict: 'EA',
    scope: { code:'=',add:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src ="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        console.log('here');
        scope.$watch('code', function (newVal) {
            if ($sce.isEnabled()){
                console.log('and');}
            if (newVal) {
                console.log('there');
                scope.url= $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
            }
        });
    }
};

});

When I put it in controllers.js it runs fine. But when I put it in directives.js, I get this error:

GET http://localhost:8000/app/%7B%7Burl%7D%7D 404 (Not Found)

Which points out that {{url}} isn't evaluated. The question is why?

,

Khanh TO · Accepted Answer · 2014-05-30 13:43:00Z

2

Try ng-src instead:

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

answered May 30, 2014 at 13:43

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aruj Over a year ago

It works, thanks. But what bothers me more is why the original code did work when in controllers.js

Khanh TO Over a year ago

@user3691475: I don't know how you use it in your controller.js. Using src is buggy due to timing problem. It's recommended to use ng-src

Collectives™ on Stack Overflow

Angularjs src="{{url}} doesn't work in one file but works in another.

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related