为什么在使用ng-html2js预处理我的AngularJS模板时，我会得到一个Lexer错误？

Question

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

对于下面的模板HTML，我在单元测试中得到了一个Lexer错误消息，但是在实际系统中，一切都很好。

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

错误消息：

错误：$parse:lexerr词法错误:表达式{ vm.width，\n‘+’高度: vm.height，\n‘+’\\‘边距\’左‘：vm.x，\n’+‘\\’边距-顶\‘：vm.y}中列17-17 []处的下一个字符。

这是预处理器中的一个bug，还是我的表达式有问题？

Answer 1

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

我认为问题在于如何使用单引号(')，当ng-html2js预处理模板使用\'转义单引号时。

因此，在您的情况下，您需要避免在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>

希望这能有所帮助！