很难调试错误 - 第 2 列的令牌“{”无效键答案

【问题标题】：Having a hard time debugging error - Token '{' invalid key at column 2很难调试错误 - 第 2 列的令牌“{”无效键
【发布时间】：2015-09-30 03:56:28
【问题描述】：

我遇到了无法调试的错误。

form-field.html

<div class='row form-group' ng-form="{{field}}" ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }">
    <label class='col-sm-2 control-label'> {{ field | labelCase }} <span ng-if='required'>*</span></label>
    <div class='col-sm-6' ng-switch='required'>

        <input ng-switch-when='true' ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' required ng-change='update()' ng-blur='blurUpdate()' />

        <div class='input-group' ng-switch-default>
            <input ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' ng-change='update()' ng-blur='blurUpdate()' />
            <span class='input-group-btn'>
                <button class='btn btn-default' ng-click='remove(field)'><span class='glyphicon glyphicon-remove-circle'></span></button> 
            </span>
        </div>
    </div>

    <div class='col-sm-4 has-error' ng-show='{{field}}.$dirty && {{field}}.$invalid' ng-messages='{{field}}.$error'>
        <p class='control-label' ng-message='required'> {{ field | labelCase }} is required. </p>
        <p class='control-label' ng-repeat='(k, v) in types' ng-message='{{k}}'> {{ field | labelCase }} {{v[1]}}</p>
    </div>
</div>

新的.html

<h2> New Contact </h2>

<form name='newContact' novalidate class='form-horizontal'>
    <form-field record='contact' field='firstName' live='false' required='true'></form-field>



 <div class='row form-group'>
        <div class='col-sm-offset-2'>
            <button class='btn btn-primary' ng-click='save()'> Create Contact </button>
        </div>
    </div>
</form>

我收到以下错误：

在浏览器中：

错误：[$parse:syntax] http://errors.angularjs.org/1.4.1/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bfield%7D%7D.%24error&p4=%7Bfield%7D%7D.%24error

在角度网站上：

错误: $parse:syntax Syntax Error 语法错误: Token '{' invalid key 在表达式 [{{field}}.$error] 的第 2 列，从 [{field}}.$error].

有人知道为什么吗？谢谢！

【问题讨论】：

每当在 ng-class 和 ng-show 中引用时，您都需要将 {{field}} 更新为字段。
Nikhil - 在这个项目中它适用于他们：github.com/tutsplus/… 但不适用于我。
ng-show 属性不应包含 {{}}。试试"field.$dirty"吧。
顺便说一句：这只是与您的问题无关，但是如果您将项目链接到未缩小的 Angular 源代码，您将在浏览器中收到可读的错误消息，而不是那些烦人的 URL 废话。（我花了一年半的时间才发现这一点......）只是不要忘记在部署之前切换回缩小版本！
感谢丹尼尔的建议，我不知道缩小版本。现在我可以更轻松地找到我的问题了，谢谢！

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

你的问题在这里：

ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }"

删除{{ }}：

ng-class="{ 'has-error': field.$dirty && field.$invalid }"

你也有同样的问题：

ng-messages='{{field}}.$error'

替换为：

ng-messages='field.$error'

但修复这些问题很可能也会导致此行出错：

ng-message='{{k}}'

所以你必须把它改成：

ng-message='k'

【讨论】：

'field' 是一个范围变量。我想用那个范围变量更新 html。如果我们删除 {{}}，则“字段”无法反映在 html 页面中。有什么解决办法吗？

【解决方案2】：

我注意到在将数据绑定到自定义指令的属性时也会发生此错误。在哪里

$scope.myData.value = "Hello!";

这会导致错误：

<my-custom-directive my-attr="{{myData.value}}"></my-custom-directive>

但这很好用：

<my-custom-directive my-attr="myData.value"></my-custom-directive>

【讨论】：

您的回答是一个很好的提示。顺便问一下，有没有一个免费的好调试器可以插入谷歌浏览器来捕捉那个错误？我是 AngularJs 新手。

【解决方案3】：

当我遵循相同的教程时，这个问题发生在我身上，我发现我的解决方案是我使用的是更新版本的 ngMessages，所以我必须用相同的版本更新我的 bower.json 文件视频（从 1.4 版开始，该示例不起作用），然后一切正常，这是我的依赖项部分：

"dependencies": {
  "angular": "1.3.9",   
  "angular-route": "1.3.9", 
  "angular-resource": "1.3.9", 
  "angular-messages": "1.3.9", 
  "bootstrap": "^3.3.6"}

【讨论】：

【解决方案4】：

假设这是我的 html

<div ng-controller='MyCtrl' ng-init="array=[{id:1}, {id:2}]">Hi, it's {{name}}. 
      <div ng-repeat='obj in array'>
        The current time is <display-time data="{{array}}"/>.
      </div>
</div>

这里display-time是自定义指令，定义如下

var demo = angular.module('demo', []);
demo.directive('displayTime', function($parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '='
        },
        transclude: false,
        template: '<span class="currentTime"></span>',
        link: function (scope, element, attrs, controller) {
            var currentDate = new Date();
            console.log(scope.data);
            element.text(currentDate.toTimeString());
        }
    }});

仔细观察data="{{array}}"使用的语法。

由于我在自定义指令的范围内使用data（带有声明

scope: {
    data: '='
},

我会得到parse error

但是如果我使用语法data="array"，并且我在链接函数中使用以下代码sn-p

scope: {
    //data: '='
},

那么我不会收到parse error。

因此，仅当您想将语法 data="{{array}}" 作为 link 函数内的 attrs 参数的一部分进行访问时，才应使用语法。

【讨论】：