AngularJS-引起语法错误的双花括号

Question

我正在尝试打印ng-repeat的$ index，但是它给了我：

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 8 of the expression [markers{{ $index }}] starting at [{{ $index }}].

这是我的代码：

<div ng-repeat="place in places">
         <leaflet id="map{{ $index }}" defaults="defaults" center="center" markers="markers{{ $index }}"></leaflet>
</div>

但是更改为可以：

<div ng-repeat="place in places">
     <leaflet id="map{{ $index }}" defaults="defaults" center="center" markers="markers0"></leaflet>

这很奇怪……为什么会这样？

Answer 1

查看它具有=表单标记的leaflet指令， 请参见此代码

=表示您喜欢隔离内部的方式绑定，因为您必须在该属性中提供作用域变量引用。

因为您提供了范围参考，所以markers0可以正常工作的地方，

但是，当您在属性中提供{{}}插值会失败，就像您做的一样，例如markers="markers{{ $index }}"

为了优雅地处理此问题，我希望您创建一个markers数组，该markers数组将具有多个值，您的数据将变成这样

$scope.markers = [{...},{...},{...},...] 

代替

$scope.marker0 = {}, $scope.marker1 = {}, $scope.marker2 = {}, ....

这样您就可以通过使用其$index轻松指出这一点

标记

<div ng-repeat="place in places">
    <leaflet id="map{{ $index }}" defaults="defaults" center="center" 
     markers="markers[$index]"></leaflet>
</div>

Answer 2

我遇到了类似的问题，但是指令不同。 我所做的一项工作实际上是在大括号之前和之后放置一个单引号

 <div ng-repeat="place in places">
     <leaflet id="map{{ $index }}" defaults="defaults" center="center" markers="markers'{{ $index }}'"></leaflet>
 </div>