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.

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.

• javascript
• angularjs
• binding
• angularjs-directive
• angularjs-scope

• 1 wrap url inside single quote will work<myDirective datasource="url"></myDirective> – Pankaj Parkar Commented Feb 7, 2015 at 20:11
• can u share how to create this directive – Siddharth Commented May 24, 2016 at 13:16

5 Answers 5

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>

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

scope: {
    dataSource: '@datasource'
}

If you want to to have two-way data binding '=' you have to bind it with a scope variable or pass a quoted string:

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

Angular tries to use your value as a variable name.

From here: "The object hash is used to set up two-way binding (using '=') or one-way binding (using '@') between the parent scope and the isolate scope. There is also '&' to bind to parent scope expressions."

You should use:

scope: {
    dataSource: '@datasource'
}

To define a isolate scope, just put '@' into scope definition and use the atribute name in your directive.

.directive('ggThumbnail', function()
{
    return {
        restrict: 'E',
        scope: {
            thumbnailSrc: '@',
            thumbnailWidth: '@',
            thumbnailHeight: '@'
        },
        link: function(scope, element, attrs, ctrl)
        {
            ctrl.init(element);

            attrs.$observe('thumbnailSrc', function()
            {
                if (attrs.thumbnailSrc)
                {
                    ctrl.prepareImage();
                }
            });
        }
    };
});