Why do I get a Lexer error while preprocessing my AngularJS template with ng-html2js

Question

I'm trying to write a unit test for an AngularJS directive using Karma. To be able to use the directive's template in the test I use karma-ng-html2js-preprocessor.

For the following template HTML I get a Lexer error message in the unit test, but in the real system everything works fine.

<div class="test"
    ng-style="{width: vm.width,
    height: vm.height,
    'margin-left': vm.x,
    'margin-top': vm.y}">
</div>

Error message:

Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 17-17 [] in expression [{width: vm.width,\n' + ' height: vm.height,\n' + ' \'margin-left\': vm.x,\n' + ' \'margin-top\': vm.y}].

Is this a bug in the preprocessor or is there a problem with my expression ?

@dayan-moreno-leon: What do you mean by "original expression"? Isn't the value of the ng-style attribute the expression? Sorry, I'm an AngularJS newbie.. — Markus Ende, Nov 06 '15 at 10:24
Looks like it doesn't like the newline character. Try without newlines inside `ng-style`. — tasseKATT, Nov 06 '15 at 20:14
@tassekatt Tried it, but then the
\'
causes the same problem. It really seems to be the \ escape character, added by ng-html2js. — Markus Ende, Nov 09 '15 at 08:21
@MarkusE. I have a similar problem (using `ng-show="myproperty == 'somevalue'"`), any workaround? thanks — juliocesar, May 08 '16 at 17:31
@juliocesar I ended up doing it in a similar way as you provided in your answer. — Markus Ende, May 09 '16 at 11:28

score 1 · Accepted Answer · answered May 08 '16 at 18:07

I got similar problem, but I didn't found how to solve it. Nevertheless I found a way to avoid it.

I think the problem is on using single quotation marks ('), when ng-html2js-preprocessor process templates, single quotation marks are escaped using \'.

So in your case you need to avoid using quotation marks in ng-style value. i.e. by define a scope for it in a controller or other place:

$scope.mystyle = {
    width: vm.width,
    height: vm.height,
    'margin-left': vm.x,
    'margin-top': vm.y
}

Then use it in tour attribute:

<div class="test" ng-style="mystyle"></div>

Hope this helps!

That's how I eventually did it. It is a work-around, but seems to be the only valid answer right now. — Markus Ende, May 09 '16 at 11:28

Why do I get a Lexer error while preprocessing my AngularJS template with ng-html2js

1 Answers1