Ошибка при отладке с ошибкой - токен '{' недопустимый ключ в столбце 2

Я столкнулся с ошибкой, которую я не могу отлаживать.

форма-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>

Я получаю следующую ошибку:

В браузере:

Ошибка: [$ parse: синтаксис] http://errors.angularjs.org/1.4.1/ $parse/syntax? p0 =% 7B & p1 = invalid %20key & p2 = 2 & p3 =% 7B% 7Bfield% 7D.% 7D% 24error & р4 =% 7Bfield% 7D% 7D% 24error.

На angular сайте:

Ошибка: синтаксис $синтаксиса Синтаксис Ошибка Синтаксис Ошибка: токен '{' недействительный ключ в столбце 2 выражения [{{поле}}. $error], начиная с [{Поле}}. $Ошибка].

Кто-нибудь знает, почему? Спасибо!

Ответ 1

Я заметил, что эта ошибка также возникает при привязке данных к атрибуту в пользовательской директиве. Где

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

Это вызывает ошибку:

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

Но это прекрасно работает:

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

Ответ 2

Ваша проблема здесь:

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'

Ответ 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"}

Ответ 4

Предположим, что это мой html

<div ng-controller='MyCtrl' ng-init="array=[{id:1}, {id:2}]">Hi, it {{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: '='
},

i получит parse error

Но если я использую синтаксис data="array", и я использую следующий фрагмент кода внутри функции ссылки

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

тогда я не получу a parse error.

Поэтому вы должны использовать синтаксис data="{{array}}", только если вы хотите получить к нему доступ как часть параметра attrs внутри link.