用 AngularJS 開發程式很少不用額外撰寫 Directive,如果我們在 Directive 裡面使用 Isolate Scope 並且從 Controller 指定了一個 function 為觸發函式(&),好死不死這個 function 是需要丟參數給它的,按照一般正常的丟法是不會 work 的,想要丟參數給觸發函式需要一點迂迴的做法。
假定我有一個 textarea
要在按 Enter 鍵的時候將內容消除,所以我需要監聽 keypress
事件,因此我撰寫了一個 onKeyin
的 Directive 來完成這件事。
然後 User 說:「Johnny 啊,能不能把正在輸入的 KeyCode 也一起顯示出來?」,我就再從 Controller 宣告 showKeyin
方法指定為觸發函式,把 KeyCode 丟給它顯示,結果不僅沒顯示 KeyCode 還收到一狗堆錯誤。
試了半天還是不能 work 的時候,我們就會對「丟參數給函式」這件事開始產生懷疑,自己到底會不會寫程式? 別懷疑,只是這次比較特殊而已,只要加個東西就 work 了。
Isolate Scope 裡面的觸發函式只接受參數是 object,而且這個 object 丟過去也不是說直接就能取用,我們只能取用這個 object 的屬性,什麼意思?看下圖。
注意到了嗎?我們丟給觸發函式的 object 有一個 input
屬性,在 HTML 標籤內宣告綁定的 function 要取用這個 input 屬性,名稱只要取得一模一樣就行了,因此我們程式可以這樣改。
因為 keypress 的 event 當中就有 keyCode 屬性,所以我們直接取用就可以了,那我需要兩個參數怎麼辦? 很簡單,因為參數都必須集中在一個 object 中,所以確認所要的參數有在 object 裡面就可以放心地加了。
參考資料
< Source Code >