Syntax Error: Token '' is unexpected, expecting [:] at column 4 of the expression [] starting at [}}]

Question

I'm writing a test for a directive using Mocha but keep getting syntax error token is unexpected.

This is the exact message:

Error: [$parse:syntax] Syntax Error: Token 'noOfColumns' is unexpected, expecting [:] at column 4 of the expression [{{ noOfColumns }}] starting at [noOfColumns }}].

This is how my test is setup in the beforeEach method

    var element, scope;

    beforeEach(inject(function (_$rootScope_, _$compile_) {

        scope = _$rootScope_.$new();

        element = angular.element('<programme-grid source="pageItem" no-of-columns="{{ noOfColumns }}" promo-image="{{ promoImage }}" limit="{{ limit }}" template="programmeGrid" />');

        scope.source = { test: "test" };
        scope.noOfColumns = "3";
        scope.promoImage = "true";
        scope.limit = "12";
        element = _$compile_(element)(scope);
        scope.$digest();
    }));

This is how my directive is setup (I have removed unnecessary code as the problem seems to be with how I bind the scope variables with the "=" and "=?" symbols):

.directive('programmeGrid', function () {
        return {
            restrict: 'E',
            scope: {
                source: '=',
                noOfColumns: '=',
                promoImage: '=?',
                promoRowNoOfColumns: '=?',
                promoRowRepeatInterval: '=?',
                limit: '=?'
            },
            controller: function($scope) { 
                // Code omitted
            },
            link: function(scope) {
                // Code omitted
            },
            templateUrl: function(element, attributes) {
                // Code omitted
            },
            replace: true
        }
    })

I have been trying to solve this problem for a while and am getting nowhere. What is causing this error and how can I fix it?

If I replace "noOfColumns: '='," to "noOfColumns: '@' that fixes it for noOfColumns which is fine, but then the next scope variable "promoImage" will break and that value has to be a bool.

score 2 · Answer 1 · edited May 23 '17 at 11:43

2

If you need to keep your '=', then you must adapt the template :

 '<programme-grid source="pageItem" no-of-columns="noOfColumns" promo-image="promoImage" limit="limit" template="programmeGrid" />'

Check this for more info : What is the difference between '@' and '=' in directive scope in AngularJS?

I also don't understand why you have this : template="programmeGrid", I think you can also remove it

edited May 23 '17 at 11:43

Community

1
1

answered Apr 22 '15 at 11:47

Deblaton Jean-Philippe

11,188
3
49
66

I've adapted my template as suggested. Now this test: it("should set number of columns", function () { expect(element.attr('no-of-columns')).to.equal('3'); }); returns AssertionError: expected undefined to equal '3' – samb90 Apr 22 '15 at 12:13

Syntax Error: Token '' is unexpected, expecting [:] at column 4 of the expression [] starting at [}}]

1 Answers1