Schwerer Debugging-Fehler - Token '{' ungültiger Schlüssel in Spalte 2

Question

Ich habe einen Fehler festgestellt, den ich nicht beheben kann.

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> 

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> 

ich die folgende Fehlermeldung erhalten:

im 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

On Winkelstelle:

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

Weiß jemand warum? Vielen Dank!

Answer 1

Ihr Problem ist hier:

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

entfernen {{ }}:

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

Auch Sie das gleiche Problem haben hier:

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

Ersetzen durch:

ng-messages='field.$error' 

Festsetzung jedoch diejenigen, wird höchstwahrscheinlich auch einen Fehler für diese Linie verursachen:

ng-message='{{k}}' 

So haben Sie es zu ändern:

ng-message='k' 

Answer 2

Ich stelle fest, dass dieser Fehler passiert auch, wenn Bindungsdaten zu ein Attribut für eine benutzerdefinierte Anweisung. Wo

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

Dies verursacht den Fehler:

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

Aber das funktioniert gut:

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

Answer 3

Dieses Problem mit mir passiert, wenn ich nach dem gleichen Tutorial wurde, und ich entdeckte, dass die Lösung in meinem Fall ist, dass ich eine neuere Version von ngMessages verwendet habe, also muss ich meine bower.json Datei mit der gleichen Version in den Videos aktualisieren (ab Version 1).4 das Beispiel nicht funktioniert), dann funktioniert alles gut und hier ist meine Abhängigkeiten Abschnitt:

"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 diese Lets ist mein 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> 

Hier display-time wird die benutzerdefinierte Richtlinie, deren Definition wie

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()); 
     } 
    }}); 

sorgfältig beachten folgt die Syntax für data="{{array}}" verwendet.

Da i data im Rahmen der benutzerdefinierten Richtlinie verwenden (mit der Aussage

scope: { 
    data: '=' 
}, 

),

i parse error

zu bekommen, aber wenn ich die Syntax data="array" und i Verwenden Sie das folgende Code-Snippet innerhalb der Link-Funktion

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

dann bekomme ich keine parse error.

Sie sollten also die Syntax data="{{array}}" nur verwenden, wenn Sie als Teil von attrs Parameter innerhalb link Funktion zugreifen möchten.