$watch是什麼？

使用$watch可以指定監控的範圍，一旦範圍內的value發生改變，所有地方都會自動更新，
用來確保view和model的即時綁定，當view或model改變時，就會觸發事件。

由於$watch、ng-change、ng-click這三個指令的效果有點類似，

所以本次範例將應用這三個指令，做相同的功能，以利比較差異程度。

Demo:

http://jsbin.com/oHIXIqa/3/edit
此範例的功能是，一旦輸入框輸入內容，就會觸發行為。

$watch、ng-change、ng-click的比較

範例中$watch和ng-change的結果相同，
但使用$watch指令，watch的值還會傳回newValue,oldValue，
提供“改變的新數值”和“前一次改變的舊數值”。

$watch和ng-change是在改變內容值的時候，觸發事件，ng-click則只會在點擊輸入框時被執行。

$watch怎麼用？

1. 在欲監控的的標籤下，給定model名稱，用來綁定內容，範例中是給輸入框名稱為"test1"的model

2. 使用$watch指令，決定監控的model內容，監控內容發生改變後，並接著執行function。

   $scope.$watch('test1', function(newValue, oldValue) {
   //這裡輸入觸發$watch之後，欲觸發的行為

   },true);

完整的Demo:

http://jsbin.com/oHIXIqa/3/edit

參考連結：
http://stackoverflow.com/questions/15664933/basic-watch-not-working-in-angularjs

第二章 Angular應用程序剖析
https://github.com/basestyle/angularjs-cn/blob/master/Chapter2.markdown

Using scope.$watch and scope.$apply
http://stackoverflow.com/questions/15112584/using-scope-watch-and-scope-apply

[AngularJS系列(3)] View-Model雙向綁定背後的故事
http://hellobug.github.io/blog/angularjs-two-ways-binding/

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
http://ithelp.ithome.com.tw/question/10140689

Day29- 入門AngularJS筆記-filter
http://ithelp.ithome.com.tw/question/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
http://ithelp.ithome.com.tw/question/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196