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 ?

Answer 1

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!