Issue with AngularJS Directive: Encountering an error stating "Unexpected token"

Question

Issue with AngularJS Directive: Encountering an error stating "Unexpected token"

Currently working with version 1.20 rc2 and attempting to incorporate 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 is invoked in the main JS file

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

All controllers and services are functioning properly, but when attempting this, I encounter the following error:

"Uncaught SyntaxError: Unexpected token : "

This is followed by

$injector:modulerr error.

By removing the "drink" directive, the error disappears, indicating an issue with the ":" or similar.

If anyone can provide insight into this problem, it would be greatly appreciated as I am completely stumped.

Thank you.

javascript angularjs angularjs-directive

Answer 1

Answer №1

Consider removing the line break before the opening bracket in your code:

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

Instead, try formatting it like this:

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

This issue could be caused by automatic semicolon insertion, where your browser adds a semicolon after the return statement because it assumes one is missing.

Answer 2

Consider removing the line break before the opening bracket in your code:

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

Instead, try formatting it like this:

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

This issue could be caused by automatic semicolon insertion, where your browser adds a semicolon after the return statement because it assumes one is missing.

Issue with AngularJS Directive: Encountering an error stating "Unexpected token"

Answer №1

Similar questions

I encountered a frustrating issue with saving user input data using localStorage

Receiving a reply from the axios function

Creating a randomly generated array within a Reactjs application

Tips on converting an array list to JSON format

Is there a way to set table column headers in ngGrid using values from another array?

Ways to send data to nested elements when implementing secure routes?

Step by step guide on aligning three bootstrap cards side by side using React

Create a string representing the path to access a property within a nested object

Tips for Removing AngularJS File from Source Code

Creating a code architecture in VuetifyJS/VueJS to enable cross-platform development without duplicating code

Radio buttons with multiple levels

Tips for importing a JavaScript file from a URL and initializing a class in a React component

Error: Uncaught TypeError when using a for loop in Vue and GraphQL

Mechanism for enhancing and modifying capabilities of an object through a design pattern

The hover effect becomes disabled once the slider is toggled

redirecting from an AJAX request

The dot operator cannot be used to access Json objects

Is there a way to select only a single line from an HTML document?

Getting to grips with accessing HTML elements within a form

Handlebars: The property "from" cannot be accessed because it is not an "own property" of its parent and permission has been denied