javascript - angular.js 中的双花括号{{}}问题

问题描述

<p ng-controller='listCtrl'> <h1>这是列表页面</h1> <ul><li ng-repeat='item in myList'><a href='https://www.haobala.com/wenda/13666.html#/myDetail/{{$index}}'>{{item}}</a></li><li ng-repeat='item in myList'><button ng-click='jump(’/myDetail/’+$index)'>{{item}}</button></li> </ul></p>

如题，如上的代码中，我需要取到$index值作为参数,在第一个li中需要加{{}}才能取到值，而第二个li中不需要加；这个该如何区分？？

问题解答

在原生html里面为了解析数据，需要使用{{}}来绑定数据，而ng的命令后面没有这需要。

{{ $var }}包裹的模板变量，当需要直接输出变量值，而无需额外解析（如过滤器处理、作为指令参数、作为函数参数）时使用，反之，ng-click='jump(’/myDetail/’+ $index)' 是在指令中调用的参数。

简单的判定标准就是

如果当前属性所赋值的类型为字面量类型，比如html模板中的属性，或者指令中以@为修饰符的属性，那么赋值的时候如果不加双花括号，均是按字面量来算的，想要按变量的方式解析，就需要加双花括号。

如果当前属性所赋值的类型是非字符串类型，比如angular模板中的各种内置指令，或者指令中以<、=、&修饰的属性，那么赋值的时候会按js的语法规则进行解析，这种情况就不需要加花括号了。

先说明下Angular中的两种类型：

模板：格式为{{...}}，实质是字符串，会被解析引擎展开成可以识别的字符串文本表达式：可以直接运行的代码，和JS写法基本一致，只是省略了所有的this。

然后你可以参照一下上下文，确定你现在是在写类似JS的部分，还是在写一个字符串文本，这样就容易判断你是需要模板还是表达式了。