javascript - 错误 : $parse:syntax Syntax Error

Question

这个错误让我抓狂，我需要帮助。

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

表单域.html

<div class='row form-group' ng-form="{{ field }}" ng-clase="{ '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-messages='required'> {{ field | labelCase }} is required. </p>
        <p class='control-label' ng-repeat='(k, v) in types' ng-messages='{{ k }}'> {{ field | labelCase }} {{ v[1] }} </p>
    </div>
</div> 

指令.js

angular.module('ContactsApp')
    .value('FieldTypes', {
        text: ['Text', 'should be text'],
        email: ['Email', 'should be email'],
        number: ['Number', 'should be number'],
        date: ['Date', 'should be date'],
        datetime: ['Datetime', 'should be datetime'],
        time: ['Time', 'should be time'],
        month: ['Month', 'should be month'],
        week: ['Week', 'should be week'],
        url: ['URL', 'should be URL'],
        tel: ['Phone Number', 'should be phone number'],
        color: ['Color', 'should be color']
    })
    .directive('formField', function ($timeout, FieldTypes) {
        return {
            restrict: 'EA',
            templateUrl: 'views/form-field.html',
            replace: true,
            scope: {
                record: '=',
                field: '@',
                live: '@',
                required: '@'
            },
            link: function ($scope, element, attr) {
                $scope.types = FieldTypes;

                $scope.remove = function (field) {
                    delete $scope.record[field];
                    $scope.blurUpdate();
                };

                $scope.blurUpdate = function () {
                    if ($scope.live !== 'false') {
                        $scope.record.$update(function (updatedRecord) {
                            $scope.record = updatedRecord;
                        });
                    }
                };
                var saveTimeout;
                $scope.update = function () {
                    $timeout.cancel(saveTimeout);
                    saveTimeout = $timeout($scope.blurUpdate, 1000);
                };
            }
        };
    });

列表.html

<p>
    <input type='search' class='form-control' placeholder='Search' ng-model='query'/>
</p>

<table class='table table-hover table-bordered'>
    <thead>
        <tr>
            <th ng-repeat='field in fields' ng-click='sort(field)'>
                {{ field | labelCase }}
                <span ng-show='sort.field === field && !sort.order' class='glyphicon glyphicon-chevron-down'></span>
                <span ng-show='sort.field === field && sort.order' class='glyphicon glyphicon-chevron-up'></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-click='show(contact.id)' ng-repeat='contact in contacts | filter: query | orderBy: sort.field : sort.order'>
            <td ng-repeat='field in fields'>
                {{ contact[field][0] }}
            </td>
        </tr>
    </tbody>
</table>

留给我，没有语法错误。知道为什么会这样吗？

Answer 1

当 {{ field }}.$error 第一次求值时 {{ field }} 还没有被插值，所以 Angular 将第一个 { 解释为开始一个对象声明和第二个作为键。在第一个摘要循环之后它起作用了，因为它已被插入到 whatever.$error。

绝对不需要 {{ field }}。使用 ng-form="form"，将 {{ field }} 替换为 form 并从 remove()< 中删除参数(没有双关语意)。表单对象的名称完全无关紧要。