The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

AngularJS 的 ngSwitch 指令 (directive) 使用陷阱與範圍觀念

我們公司目前已經有兩、三個案子開始使用 AngularJS 進行開發,過程中自然會遇到一些陷阱,我們當然也知道,這些陷阱是因為觀念不完整所造成的,只要你認真看完看懂官網文件在講些甚麼,自然不會犯這種錯,但我也相信 99% 的開發人員不會把官網文件全部看完才開始撰寫程式。這次同事遇到的問題是在使用 ngSwitch 指令用以切換不同網頁內容時,會抓不到 Model 的問題,我們就來看看遇到這種問題應該如何解決。

首先,我弄了一個可以重現這個問題的程式碼範例:http://jsbin.com/uzomaw/2/edit

我們先來看看 Controller 的 Model 與 Behavior 定義:

接著看看 View 的定義,我們定義了一個 ngSwitch 區塊,並且自動綁定 stage 這個 Model,然後有兩個條件的顯示區塊,分別定義了一組 <select> 與一個 <span> 標籤,也分別在 <select> 上面宣告了一個 SelectModel1SelectModel2 模型 (Model),並且也設定好模型繫結。然而,在 ngSwitch 之外,還定義了兩個同名的 SelectModel1SelectModel2 模型 (Model)。

但是在執行的過程中,在 ngSwitch 範圍內的這些 Model,卻無法跟 ngSwitch 範圍外的 Model 雙向繫結,到底是發生什麼事呢?!

我們從 AngularJS 官網 API 文件 ngSwitch (directive in module ng) 可以發現一句話:

This directive creates new scope.

這句話說得簡單,解釋起來卻麻煩,而且官網的範例程式也不夠複雜,不足以表達 “create new scope” 這件事到底真正的含意為何,所以我就弄了一個範例專案,也順便錄製了一個短片來解釋這句話代表的意思,各位還是看影片吧,希望解釋的夠清楚,若是不夠了解,歡迎留言詢問。

註:建議切換到 HD 模式 全螢幕 進行觀賞,以取得高解析度的錄影畫面顯示:

本影片中的範例程式網址:http://jsbin.com/uzomaw/2/edit

 

相關連結