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

时间:2015-07-11 12:13:05

标签: javascript angularjs angularjs-directive angularjs-scope

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

形状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/ $解析/语法P0 =%7B&安培; P1 =无效%20key&安培; P2 = 2及P3 =%7B%7Bfield%7D%7D%24error&安培; P4 =%7Bfield%7D%7D%24error

在有角度的网站上:

  

错误:$ parse:syntax语法错误语法错误:令牌&#39; {&#39;无效的密钥   在表达式[{{field}}。$ error]的第2列开始   [{字段}}。$错误。

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

4 个答案:

答案 0 :(得分:65)

我注意到在将数据绑定到自定义指令的属性时也会发生此错误。其中

$scope.myData.value = "Hello!";

这会导致错误:

<my-custom-directive my-attr="{{myData.value}}"></my-custom-directive>

但这很好用:

<my-custom-directive my-attr="myData.value"></my-custom-directive>

答案 1 :(得分:9)

你的问题在这里:

*vec = *vec - ((end_element-start_element+1) * sizeof(Data_t));

删除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}}'

答案 2 :(得分:0)

当我遵循相同的教程时,这个问题发生在我身上,我发现我的情况下的解决方案是我使用的是更新版本的ngMessages所以我必须使用相同的版本更新我的bower.json文件视频(从版本1.4开始,示例不起作用),然后每件事都运行正常,这是我的依赖项部分:

"dependencies": {
  "angular": "1.3.9",   
  "angular-route": "1.3.9", 
  "angular-resource": "1.3.9", 
  "angular-messages": "1.3.9", 
  "bootstrap": "^3.3.6"}

答案 3 :(得分:0)

让我们知道这是我的HTML

<div ng-controller='MyCtrl' ng-init="array=[{id:1}, {id:2}]">Hi, it's {{name}}. 
      <div ng-repeat='obj in array'>
        The current time is <display-time data="{{array}}"/>.
      </div>
</div>

此处display-time是自定义指令,其定义如下

var demo = angular.module('demo', []);
demo.directive('displayTime', function($parse) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '='
        },
        transclude: false,
        template: '<span class="currentTime"></span>',
        link: function (scope, element, attrs, controller) {
            var currentDate = new Date();
            console.log(scope.data);
            element.text(currentDate.toTimeString());
        }
    }});

仔细观察data="{{array}}"使用的语法。

因为我在自定义指令的范围内使用data(使用语句

scope: {
    data: '='
},

),

我将获得parse error

但如果我使用语法data="array",我在链接函数中使用以下代码片段

scope: {
    //data: '='
},

然后我不会得到parse error

因此,只有当您想要在data="{{array}}"函数内attrs参数中访问它时,才应使用语法link