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

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

首先，我弄了一個可以重現這個問題的程式碼範例：[**http://jsbin.com/uzomaw/2/edit**](http://jsbin.com/uzomaw/2/edit)

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

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/08e010bfa2f084fbd4be-image_2117.png)

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

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/bb0c668592c00c52c91b-image_2118.png)

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

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/7bfd6ce1408ddeb901ec-image_2119.png)

我們從 AngularJS 官網 API 文件 [**ngSwitch (directive in module ng)**](http://docs.angularjs.org/api/ng.directive:ngSwitch) 可以發現一句話：

> **This directive creates new scope.**

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ea6d852511bca6c75892-image_2120.png)

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

**註：**建議切換到 **HD 模式** 與 **全螢幕** 進行觀賞，以取得高解析度的錄影畫面顯示：  
![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/993a69e284b4e2770336-image_2121.png)

<iframe height="435" src="http://www.youtube.com/embed/I8cqOJp6xyw" frameborder="0" width="580" allowfullscreen="allowfullscreen"></iframe>

本影片中的範例程式網址：[**http://jsbin.com/uzomaw/2/edit**](http://jsbin.com/uzomaw/2/edit)

**相關連結**

-   [ngSwitch (directive in module ng )](http://docs.angularjs.org/api/ng.directive:ngSwitch)
-   [What are Scopes?](http://docs.angularjs.org/guide/scope)
-   [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes) !!
-   [深入理解 AngularJS 的 Scope – 尘埃落定](http://www.lovelucy.info/understanding-scopes-in-angularjs.html)