这个错误把我逼疯了,我需要帮助。
语法错误:从{ field }.$error开始的表达式{ field }}.$error列2处的令牌'{‘无效键。
form-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>留给我的,没有语法错误。知道为什么会这样吗?
发布于 2015-10-01 21:45:14
当计算{{ field }}.$error时,第一次{{ field }}还没有内插,因此角将第一个{作为对象声明的开始,第二个作为键。在第一个摘要周期之后,它可以工作,因为它已经被内插到whatever.$error中。
绝对没有必要使用{{ field }}。使用ng-form="form",将{{ field }}替换为form,并从remove()中移除参数(不使用双关语)。表单对象的名称完全不相关。
发布于 2015-10-02 15:52:22
当您在html模板中将代码包装在{{ }}中时,它会告诉您需要以角表达式的形式运行该模板的内容。但是,如果您将其放置在已经是角表达式的内容中,它将将其视为代码,并抛出一个语法错误,因为它不是有效的javascript。以ng-开头的属性将被视为角表达式。所以如果你有:
<div class='row form-group' ng-form="{{ field }}" ng-clase="{ 'has-error': {{ field }}.$dirty && {{ field }}.$invalid }">它将ng-clase的内容作为一个角扩展来处理,因此{{ }}是不必要的。它应该是:
<div class='row form-group' ng-form="field" ng-class="{ 'has-error': field.$dirty && field.$invalid }">我用这个断琴复制了您的错误,并用这个工作小提琴修复了它。
编辑:实际上,该行不是导致错误的原因,因为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'>发布于 2015-09-27 19:08:59
缺少了一些东西,因为我没有看到从list.html实例化这个指令,所以我们不能在这里得到整个图像。
考虑到这一点,在form-field.html中使用{{field}的方式很奇怪:指令接收field='@‘,这意味着它仍然是一个字符串-Field.html,您尝试将它用作一个对象。查看$compile上的文档,这些文档很好地解释了如何将参数传递到指令的独立作用域。
https://stackoverflow.com/questions/32811128
复制相似问题