为什么在使用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>

错误讯息：

  

错误：[$ parse：lexerr] Lexer错误：出现意外的下一个字符   表17-17 [] in [[width：vm.width，\ n'+             '身高：vm.height，\ n'+             '\'margin-left \'：vm.x，\ n'+             '\'margin-top \'：vm.y}]。

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

Answer 1

我遇到了类似的问题，但我还没有找到解决方法。不过我找到了避免它的方法。

我认为问题在于使用单引号（'），当 ng-html2js-preprocessor 处理模板时，使用\'转义单引号。< / p>

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

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

然后在tour属性中使用它：

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

希望这有帮助！