He encontrado un error que no puedo depurar.
formulario-campo.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>nuevo.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>Recibo el siguiente error:
En el navegador:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.1/ $parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bfield%7D%7D.%24error&p4= %7Bcampo%7D%7D.%24error
En el sitio angular:
Error: $parse:syntax Error de sintaxis Error de sintaxis: Token '{' clave no válida en la columna 2 de la expresión [{{field}}.$error] que comienza en [{field}}.$error].
¿Alguien sabe por qué? ¡Gracias!
Observé que este error también ocurre cuando se vinculan datos a un atributo en una directiva personalizada. Donde
$scope.myData.value = "Hello!";Esto causa el error:
<my-custom-directive my-attr="{{myData.value}}"></my-custom-directive>Pero esto funciona bien:
<my-custom-directive my-attr="myData.value"></my-custom-directive>Tu problema está aquí:
ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }" Quitar {{ }} :
ng-class="{ 'has-error': field.$dirty && field.$invalid }"También tienes el mismo problema aquí:
ng-messages='{{field}}.$error'Reemplazar con:
ng-messages='field.$error'Sin embargo, arreglarlos probablemente también cause un error para esta línea:
ng-message='{{k}}'Así que tienes que cambiarlo a:
ng-message='k'Este problema me sucedió cuando estaba siguiendo el mismo tutorial y descubrí que la solución en mi caso es que estaba usando una versión más nueva de ngMessages, así que tengo que actualizar mi archivo bower.json con la misma versión en los videos ( a partir de la versión 1.4, el ejemplo no funciona), luego todo funciona bien y aquí está mi sección de dependencias:
"dependencies": { "angular": "1.3.9", "angular-route": "1.3.9", "angular-resource": "1.3.9", "angular-messages": "1.3.9", "bootstrap": "^3.3.6"}