AngularJS pass URL in attribute to isolated scope of directive - unexpected token ':'

Question

I'm fairly new to AngularJS and just started using it a few days ago, so forgive me if the question itself is incorrect.

The problem I ran into is that I'd like to pass a URL parameter via attribute to the isolated scope of my directive, but at the : part in http:// it gives me an error, saying Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://...

The HTML part of the directive (where I "call" it) is something like this:

<myDirective datasource="http://url"></myDirective>

And I bind(?) it to the isolated scope like this:

scope: {
    dataSource: '=datasource'
}

If the value of the attribute contains only simple characters, it works. How can I solve this?

Thanks.

Answer 1

In your case angular is trying to evaluating value of datasource attribute. Because you mention = i.e. two way binding for variable.

If you wrap URL inside ' (single quote) will solve your problem. because the mentioned value will directly binded to directive isolated scope variable.

Markup

<my-directive datasource="'http://url'"></my-directive>

Answer 2

Dont use '=' in directive instead use @ because you are passing normal string.

scope: {
    dataSource: '@datasource'
}