为什么在使用 ng-html2js 预处理我的 AngularJS 模板时出现 Lexer 错误

Question

我正在尝试使用 Karma 为 AngularJS 指令编写单元测试。为了能够在测试中使用指令的模板，我使用 karma-ng-html2js-preprocessor.

对于下面的模板HTML我在单元测试中收到 Lexer 错误消息，但在实际系统中一切正常。

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

错误信息：

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}].

这是预处理器中的错误还是我的表达式有问题？

Answer 1

我遇到了类似的问题，但我没有找到解决方法。尽管如此，我还是找到了避免它的方法。

我认为问题在于使用单引号 (')，当 ng-html2js-preprocessor 流程模板时，使用 [= 转义单引号13=].

因此，在您的情况下，您需要避免在 ng-style 值中使用引号。即在控制器或其他地方为它定义一个范围：

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

然后在旅游属性中使用它：

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

希望对您有所帮助！

为什么在使用 ng-html2js 预处理我的 AngularJS 模板时出现 Lexer 错误

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

angularjs

karma-runner

ng-html2js