难以调试错误 - 令牌'{'第2列的无效密钥

Question

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

形式，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> 

new.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> 

，我发现了以下错误：

在浏览器：

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

在角点：

Error: $parse:syntax Syntax Error Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error].

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

Answer 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' 

Answer 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> 

Answer 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"} 

Answer 4

让supppose这是我的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"，和我使用下面的代码片段的链接函数内部

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

然后我不会得到parse error。

所以，只有在link函数内部需要访问attrs参数时，才应使用语法data="{{array}}"。