web-dev-qa-db-fra.com

Avoir une erreur de débogage difficile - Clé non valide du jeton '{' dans la colonne 2

J'ai rencontré une erreur que je ne peux pas déboguer.

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>

J'obtiens l'erreur suivante:

Dans le navigateur:

Erreur: [$ parse: syntax] http://errors.angularjs.org/1.4.1/ $ parse/syntax? P0 =% 7B & p1 = invalide% 20key & p2 = 2 & p3 =% 7B% 7Bfield% 7D% 7D.% 24error & p4 =% 7Bfield% 7D% 7D.% 24error

Sur angular:

Erreur: $ parse: syntaxe Erreur de syntaxe Erreur de syntaxe: jeton '{' clé non valide dans la colonne 2 de l'expression [{{field}}. $ Error] à partir de [{field}}. $ Error].

Est-ce que quelqu'un sait pourquoi? Merci!

javascriptangularjsangularjs-directiveangularjs-scope
35
Angelo

Je remarque que cette erreur se produit également lors de la liaison de données à un attribut sur une directive personnalisée. Où

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

Cela provoque l'erreur:

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

Mais cela fonctionne bien:

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

Votre problème est ici:

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

Retirer {{ }}:

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

Vous avez également le même problème ici:

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

Remplacer par:

ng-messages='field.$error'

Cependant, la correction de ceux-ci entraînera très probablement une erreur pour cette ligne:

ng-message='{{k}}'

Vous devez donc le changer en:

ng-message='k'
9
Chrillewoodz

Supposons que ce soit mon 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>

Ici display-time est la directive personnalisée, dont la définition est la suivante

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

Observez attentivement, la syntaxe utilisée pour data="{{array}}".

Puisque j'utilise data dans le champ d'application de la directive personnalisée (avec la déclaration

scope: {
    data: '='
},

),

j'aurai parse error

Mais si j'utilise la syntaxe data="array", et j'utilise l'extrait de code suivant dans la fonction de lien

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

alors je n'aurai pas de parse error.

Vous devez donc utiliser la syntaxe data="{{array}}" uniquement si vous souhaitez y accéder dans le cadre du paramètre attrs à l'intérieur de la fonction link.

0
madhu sudhan

Ce problème m'est arrivé lorsque je suivais le même tutoriel, et j'ai découvert que la solution dans mon cas était que j'utilisais une version plus récente de ngMessages donc je dois mettre à jour mon fichier bower.json avec la même version dans les vidéos ( à partir de la version 1.4, l'exemple ne fonctionne pas), alors tout fonctionne correctement et voici ma section dépendances:

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