AngularJS在JSON中关闭圆括号上绑定chokes

时间:2017-11-01 07:30:51

标签: javascript angularjs json ng-map

我收到了这个错误:

  

错误:[$ parse:lexerr] Lexer错误:未终止的引用...

....当angular尝试将一些JSON绑定到我的视图时。这是因为我的一部分json有一个这样的闭合圆括号:

[{"title":"(MyString)"}]

这是在JSON中正确形成的,但是在某些时候,当angular尝试绑定JSON时,我得到了错误。就像angular将结束圆括号解释为JavaScript或其他东西一样,因此它无法识别'MyString'之后的任何JSON,并将JSON视为格式错误。我用Google搜索并查看了StackOverflow上的类似错误,但看不到任何关于JSON中圆形右括号问题的问题导致角度问题。

我的JSON定义了地理位置,我怀疑当角度尝试绑定ng-repeat指令中的位置时可能会出现问题,如下所示:

<div ng-repeat="loc in mapsCtrl.locations">

我尝试使用ngSanitize模块清理控制器javascript中的json(我知道这是用于HTML清理,但我想知道它是否可行 - 但它没有):

title: this.$sanitize(results.MapLocation[i].Title),

我也试过Javascript替换:

title: results.MapLocation[i].Title.replace(")","\)"

但出于某种原因(也许是因为我使用的是TypeScript然后被转换?),当我在Chrome调试器中检查时,JSON看起来完全一样:

title: "(MyString)"

然后我尝试双重逃脱:

title: results.MapLocation[i].Title.replace(")","\\)"

...我在调试器中的JSON看起来像是:

title : "(MyString\)"

...但我得到了同样的错误。这看起来像一个有角度的错误。我想也许我需要使用一些特定的Angular指令进行绑定?对表达式使用'ng-bind'而不是{{}}应该没有任何区别,因为ng-bind只是大括号语法的缩写。如果有任何方法可以解决这个问题,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

我发现当{{loc}}绑定在下面的鼠标悬停内时,实际上发生了错误。我真的应该记住这一点 - 通过注释掉或删除代码的各个部分来简单地划分和征服以确定错误发生的确切位置:

<ng-map .... 
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}"
                on-mouseover="mapsCtrl.handleMarkerMouseover(event, {{loc}}, mapsCtrl.NgMap, mapsCtrl)"
    ...
</ng-map>

...如果我使用ng-mouseover,它会修复错误。但现在,事件并没有发生。因此,如果我现在更改鼠标悬停以便我不会尝试插入{{loc}},那么一切正常:

<ng-map .... 
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}"
                on-mouseover="mapsCtrl.handleMarkerMouseover(event, loc, mapsCtrl.NgMap, mapsCtrl)"
    ...
</ng-map>

因此,如果AngularJS正在插入JSON,那么它所执行的特定上下文似乎需要被特别声明为“在AngularJS领域中” - 在这种情况下,鼠标悬停中JSON的插值需要在ng-mouseover,否则如果使用on-mouseover并传入JSON,请不要使用插值。