Angularjs Directive not working "Unexpected token"

Question

So am using 1.20 rc2 and trying to implement a directive:

var directives = angular.module('directives', ['controllers']);

directives.directive("drink", function()
{
return 
{
    template: '<div>{{flavor}}</div>',
    link: function(scope){
        scope.flavor = "cherry";
    }
}
});

the directive gets called in the main JS file

 var comsumerApp = angular.module('comsumerApp', ['ngRoute','controllers', 'services', 'directives']);

All the controllers work as do the services but when trying to do this I get this error:

"Uncaught SyntaxError: Unexpected token : "

then I get the

$injector:modulerr error.

Commenting out the "drink" directive stops this error so obviously it's something to do with the : or something.

Can anyone shine a light on this problem I'm totally lost.

Thanks.

Answer 1

Try removing the linebreak before the opening bracket:

return 
{
    template: '<div>{{flavor}}</div>',
    link: function(scope){
        scope.flavor = "cherry";
    }
}

to this:

return {
    template: '<div>{{flavor}}</div>',
    link: function(scope){
        scope.flavor = "cherry";
    }
}

It might be due to automatic semicolon insertion, so your browser inserts an ; after the return, because it thinks you just missed it..