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

Question

<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中不需要加；這個該如何區分？ ？

Answer 1

在原生html裡面為了解析數據，需要使用{{}}來綁定數據，而ng的指令後面沒有這需要。

Answer 2

{{ $var }}包裹的模板變數，當需要直接輸出變數值，而無需額外解析（如過濾器處理、作為指令參數、作為函數參數）時使用，反之，ng -click="jump('/myDetail/'+ $index)" 是在指令中呼叫的參數。

Answer 3

簡單的判定標準就是

• 如果當前屬性所賦值的類型為字面量類型，例如html模板中的屬性，或者指令中以@為修飾符的屬性，那麼賦值的時候如果不加雙花括號，均是按字面量來算的，想要用變數的方式解析，就需要加雙花括號。

• 如果目前屬性所賦值的型別是非字串型，例如angular模板中的各種內建指令，或是指令中以、=、&修飾的屬性，那麼賦值的時候就會按js的語法規則進行解析，這種情況就不需要加花括號了。

Answer 4

先說明下Angular中的兩種：

範本：格式為{{...}}，實質是字串，會被解析引擎展開成可以識別的字串文字
表達式：可以直接運行的程式碼，和JS寫法基本上一致，只是省略了所有的this。

然後你可以參考一下上下文，確定你現在是在寫類似JS的部分，還是在寫一個字符串文本，這樣就容易判斷你是需要模板還是表達式了。