javascript - AngularJS 绑定(bind)在 JSON 中的右圆括号上阻塞

Question

我收到这个错误:

Error: [$parse:lexerr] Lexer Error: Unterminated quote ...

....当 Angular 试图将一些 JSON 绑定(bind)到我的 View 时。这是因为我的部分 json 有一个右圆括号，如下所示:

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

这是在 JSON 中正确形成的，但是在某些时候当 Angular 尝试绑定(bind) JSON 时，我得到了错误。这就像 angular 将右圆括号解释为 JavaScript 或其他东西，所以它无法识别“MyString”之后的任何 JSON，并将 JSON 视为格式错误。我用谷歌搜索并查看了 StackOverflow 上的类似错误，但没有看到任何关于 JSON 中圆括号结束导致 Angular 问题的问题。

我的 JSON 定义了地理位置，我怀疑当 angular 尝试像这样在 ng-repeat 指令中绑定(bind)位置时可能会出现问题:

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

我尝试使用 ngSanitize 模块来清理我的 Controller 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 错误。我在想也许我需要使用一些特定的 Angular 指令来进行绑定(bind)？对表达式使用 'ng-bind' 而不是 {{}} 应该没有任何区别，因为 ng-bind 只是大括号语法的普通写法。对于解决此问题的任何方法，我将不胜感激。

Answer 1

我发现错误实际上是在 {{loc}} 绑定(bind)在下面的 on-mouseover 中时发生的。我真的应该记住这一点 - 简单的分而治之，通过注释掉或删除部分代码来确定错误发生的确切位置:

<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，它会修复错误。但是现在，事件不会触发。因此，如果我现在更改 on-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，则不要使用插值。