問題三 -- 為什麼用了 Angular 的第三方套件就沒辦法 binding ？

在實習的工作上碰到了這個問題，ng-model 名稱沒有任何問題，舉例來說我今天 ng-model 這樣設定 ng-model="name"，但是在 Controller 內卻無法抓到他的值，也就是 $scope.name 完全沒有東西，即時使用 $watch 來偵測他的數值也完全沒有數值的變化。

這是因為當改變 primitive 或者物件的值時，會在 child scope 建立一個新的同名稱變數，而非使用原本 parent scope 的變數，在 input 中改變值時，並不會改變到 parent scope 的 name 變數。

我寫了一個簡單的範例以及解決方法給大家看

將

    <accordion>
      <accordion-group is-open="status.isFirstOpen=true">
        <accordion-heading>測試</accordion-heading>
   <span style="color:#0000CD">     <input type="text" ng-model="name"></span>
        <p>{{test}}</p>
      </accordion-group>
    </accordion>

改成

    <accordion>
      <accordion-group is-open="status.isFirstOpen=true">
        <accordion-heading>測試</accordion-heading>
<span style="color:#FF0000">        <input type="text" ng-model="$parent.$parent.name"></span>
        <p>{{test}}</p>
      </accordion-group>
    </accordion>

預覽

http://plnkr.co/edit/GzxSXdrXtFhE9JHzg1Uw?p=preview

不過這並不是唯一可能的原因，這只是比較常見的問題，還有其他種可能的狀況，請參考同事整理的文章。

http://malikid-ee.blogspot.tw/2014/09/angularjs-scope-issues-when-using.html

#預覽中使用的範例是 ui-bootstrap 的 accordion