Javascript 很难调试错误 - 第 2 列的令牌“{”无效键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31357055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Having a hard time debugging error - Token '{' invalid key at column 2
提问by Angelo
I have encountered an error which I'm unable to debug.
我遇到了无法调试的错误。
form-field.html
表单域.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>
new.html
新的.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>
I'm getting the following error:
我收到以下错误：
In the browser:
在浏览器中：
Error: [$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] http://errors.angularjs.org/1.4.1/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bfield%7D%7D.%24error&p4= %7B 字段%7D%7D.%24 错误
On angular site:
在角度站点上：
Error: $parse:syntax Syntax Error Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error].
错误：$parse:syntax 语法错误 语法错误：从 [{field}}.$error] 开始的表达式 [{{field}}.$error] 的第 2 列处的令牌“{”无效键。
Does someone know why? Thanks!
有人知道为什么吗？谢谢！
回答by Daniel Flippance
I notice that this error also happens when binding data to an attribute on a custom directive. Where
我注意到将数据绑定到自定义指令上的属性时也会发生此错误。在哪里
$scope.myData.value = "Hello!";
This causes the error:
这会导致错误：
<my-custom-directive my-attr="{{myData.value}}"></my-custom-directive>
But this works fine:
但这工作正常：
<my-custom-directive my-attr="myData.value"></my-custom-directive>
回答by Chrillewoodz
Your problem is here:
你的问题在这里：
ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }"
Remove {{ }}:
删除{{ }}：
ng-class="{ 'has-error': field.$dirty && field.$invalid }"
Also you have the same issue here:
你也有同样的问题：
ng-messages='{{field}}.$error'
Replace with:
用。。。来代替：
ng-messages='field.$error'
However fixing those will most likely also cause an error for this line:
但是，修复这些很可能也会导致此行出错：
ng-message='{{k}}'
So you have to change it to:
所以你必须把它改成：
ng-message='k'
回答by Ahmed Atalla
This problem happened to me when i was following the same tutorial , and i discovered that the solution in my case is that i was using a newer version of ngMessages so i have to update my bower.json file with the same version in the videos (starting from version 1.4 the example doesn't work), then every thing works fine and here is my dependencies section:
当我在学习相同的教程时，这个问题发生在我身上，我发现我的解决方案是我使用的是较新版本的 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"}
回答by madhu sudhan
Lets supppose this is my html
让我们假设这是我的 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>
Here display-timeis the custom directive, whose definition is as follows
这里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());
}
}});
Observe carefully, the syntax used for data="{{array}}".
仔细观察，用于data="{{array}}".
Since i am using datain the scope of custom directive (with the statement
由于我data在自定义指令的范围内使用（带有语句
scope: {
data: '='
},
),
),
i will get parse error
我会得到 parse error
But if i use the syntax data="array", and i use the following code snippet inside the link function
但是如果我使用语法data="array"，并且我在链接函数中使用以下代码片段
scope: {
//data: '='
},
then i will not get a parse error.
那么我不会得到一个parse error.
So you should use the syntax data="{{array}}"only if you want to access it as part of attrsparameter inside linkfunction.
因此，data="{{array}}"仅当您想将其作为attrs函数内部参数的一部分访问时，才应使用该语法link。
