難以調試錯誤 - 令牌'{'第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}}"。