错误：$ parse：syntax语法错误

Question

这个错误令我疯狂，我需要帮助。

Syntax Error: Token '{' invalid key at column 2 of the expression [{{ field }}.$error] starting at [{ 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 }}尚未内插，所以角解释第一{作为对象声明的开始和所述第二一个作为密钥。在第一个摘要循环之后，它可以工作，因为它已被插入到whatever.$error。

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

Answer 2

缺少一些东西，因为我没有看到该指令是从list.html实例化的，所以我们无法在这里得到整个图片。

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

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

Answer 3

当你在你的html模板中用{{ }}包装代码时，它告诉角度它需要以角度表达式的形式运行它的内容。然而，如果你把它放在已经是一个角度表达式的东西里面，它会把它当作代码，并且抛出一个语法错误，因为它不是有效的javascript。以ng-开头的属性将被视为角度表达式。所以，你必须：

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

它将对待ng-clase内容已经作为一个角度p21蛋白表达，所以{{ }}是不必要的。它应该是：

我已经与这个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'>