形状field.html

Question

这个错误让我发疯，我需要帮助。

语法错误：表达式[{{第2列的令牌'{'无效键 field}}。$ error]从[{field}}开始。$ error]。

形状field.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>

directives.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);
                };
            }
        };
    });

list.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()中移除参数（无双关语）。表单对象的名称完全不相关。

Answer 2

当你在html模板中的{{ }}中包装代码时，它告诉angular它需要将其内容作为角度表达式运行。但是，如果将其置于已经是角度表达式的内容中，它会将其视为代码，并抛出语法错误，因为它不是有效的javascript。以ng-开头的属性将被视为角度表达式。所以你在哪里：

<div class='row form-group' ng-form="{{ field }}" ng-clase="{ 'has-error': {{ field }}.$dirty && {{ field }}.$invalid }">

它会将ng-clase的内容视为角度exprssion，因此{{ }}是不必要的。它应该是：

<div class='row form-group' ng-form="field" ng-class="{ 'has-error': field.$dirty && field.$invalid }">

我已使用此broken jsfiddle重现您的错误，并使用此working jsfiddle修复此错误。

编辑：实际上，该行不是导致错误的原因，因为int ng-clase类型导致表达式被忽略。我认为造成错误的行是：

 <div class='col-sm-4 has-error' ng-show='{{ field }}.$dirty && {{ field }}.$invalid' ng-messages='{{ field }}.$error'>

可以用类似的方式修复：

<div class='col-sm-4 has-error' ng-show='field.$dirty && field.$invalid' ng-messages='field.$error'>

Answer 3

由于我没有看到指令是从list.html实例化的，所以我不知道有什么东西丢失了，所以我们无法在这里看到整个图片。

考虑到这一点，你在form-field.html中使用{{field}}的方式很奇怪：指令接收field ='@'，这意味着它是一个字符串，但是你在form-field.html中尝试将它用作对象。查看有关$ compile的文档，该文档解释了如何将参数传递给指令的隔离范围。

https://docs.angularjs.org/api/ng/service/ $编译

错误：$ parse：syntax语法错误

形状field.html

directives.js

list.html

3 个答案: