javascript - angular.js 中的双花括号{{}}问题
ringa_lee
ringa_lee 2017-07-04 13:44:52
0
4
1940
<p ng-controller="listCtrl">
    <h1>这是列表页面</h1>
    <ul>
        <li ng-repeat="item in myList"><a href="#/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中不需要加;这个该如何区分??

ringa_lee
ringa_lee

ringa_lee

全部回复(4)
伊谢尔伦

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

伊谢尔伦

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

ringa_lee

简单的判定标准就是

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

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

滿天的星座

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!