难以调试错误 - 第2列的令牌'{'无效密钥

Question

我遇到了一个我无法调试的错误.

外形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:syntax] http://errors.angularjs.org/1.4.1/ $ parse/syntax？p0 =%7B&p1 =无效%20key&p2 = 2&p3 =%7B%7Bfield%7D%7D.%24error&p4 = %7Bfield%7D%7D%24error

在角度站点:

错误:$ parse:syntax语法错误语法错误:表达式[{{field}}.$ error]第2列的令牌'{'无效键,从[{field}}开始.$ error].

有人知道为什么吗？谢谢!

Answer 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>

Answer 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'