如何修复 AngularJS 组件属性的语法错误？

Question

您好，我将此组件用作日期时间选择器： https://dalelotts.github.io/angular-bootstrap-datetimepicker/

我在运行时生成了多个日期字段，此组件需要引用字段名称，如下面的代码所示

<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#{{param.Name}}' }" />

但是我在选择日期后收到 angular.js 的错误:

我只是问这个语法，如何修改？

完整的代码是这样的：

更新

对不起各位，你们都提出了相同的语法，

datetimepicker-config="{ dropdownSelector: '#' + {{ param.Name }} }"

但它没有用，当我打开页面时立即中断：

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 28 of the expression [{ dropdownSelector: '#' + {{ param.Name }} }] starting at [{ param.Name }} }].

我认为这里缺少结束单引号...

Answer 1

如文档所述，dropdownSelector 需要一个字符串。所以你必须连接：

<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#' + param.Name }" />

Answer 2

修正为

<datetimepicker 
data-ng-model="data.embeddedDate" 
datetimepicker-config="{ dropdownSelector: '#' + {{ param.Name }} }" />

将 data-ng-model="data.embeddedDate" 添加到您的 ng-model

Answer 3

双花括号 {{ }} 插值适用于 id 属性，因为 $compile service is doing interpolation binding to a native HTML attribute. The datetimepicker-config attribute is an AngularJS component attribute which is evaluated as an Angular Expression.

不要在 Angular 表达式中使用插值 {{ }}。

<!-- DONT interpolate in Angular Expressions 
<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#{{param.Name}}' }" />
-->

<!-- INSTEAD -->
<datetimepicker 
    ng-model="param.DefaultValues[0]" 
    datetimepicker-config="{ dropdownSelector: '#' + param.Name }" />

---

里面有什么angular表达式？双花括号 {{}} 是 angular 表达式。 datetimepicker-config 属性的值与 angular 无关，它只是一个 JS 对象 {}

datetimepicker-config 属性使用单向 < 绑定求值。它 未评估为简单的 JavaScript 对象 。它被评估为 Angular Expression. Double curly brackets are DOM interpolation binding. 双大括号 {{ }} 不是 Angular 表达式中的合法语法。

有关详细信息，请参阅：

• AngularJS Developer Guide - AngularJS Expressions vs. JavaScript Expressions
• AngularJS $parse Service API Reference
• AngularJS $interpolation Service API Reference

Syntax Error: Token '{' invalid key at column 28 of the expression { dropdownSelector: '#' + {{ param.Name }} } starting at { param.Name }} }

错误：$parse:语法

语法错误

描述

当表达式中存在语法错误时发生。编译表达式时会抛出这些错误。错误消息包含更准确的错误描述，包括表达式中发生错误的位置（列）。

要解决问题，请详细了解 AngularJS expressions、确定错误并修复表达式的语法。

— AngularJS Error Reference - $parse:syntax