javascript - angular.js 中的雙花括號{{}}問題

問題描述

<p ng-controller='listCtrl'> <h1>這是列表頁面</h1> <ul><li ng-repeat='item in myList'><a href='http://www.wxshucaidpc.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的部分，還是在寫一個字符串文本，這樣就容易判斷你是需要模板還是表達式了。