ng-blur是什麼？

在angular 1.2版本中，新增blur的監聽事件，
所以務必確認專案的angular版本，若版本較舊，此項指令就沒辦法work。

ng-blur可以使用在window, input, select, textarea, a，這五種標籤，
用來判斷焦點是否存在。

本次Demo是改寫男丁格爾教學所寫的範例，
主要以ng-class、ng-blur、ng-focus的結合應用。

http://jsbin.com/EhepoBe/1
範例中，
點選文字框獲得焦點，文字框底色變成黃色。
離開文字框取消焦點，文字框底色變成紅色。

另外也增加一個active的變數，獲得焦點為true、離開焦點傳回false。

ng-blur和ng-focus怎麼用？

1. 首先建立兩個樣式，用來顯示文字框焦點是否存在的視覺效果。

   input[type="text"].myFocus {
   background-color: yellow;
   }
   input[type="text"].myBlur {
   background-color: red;
   }

2. 使用ng-init，建立變數的初始值。

focus →是否顯示焦點存在的樣式
blur →是否顯示焦點離開的樣式
active →顯示文字框焦點是否存在

ng-init="focus=false;blur=false;active=false"

3. 用ng-class來顯示不同的樣式。
   如果focus是true，就顯示myFocus的樣式
   如果focus是true，就顯示myBlur的樣式

   ng-class="{ myFocus: focus, myBlur: blur }"

4. 用ng-focus和ng-blur這兩個事件，去執行不同的行為。
   ng-focus=“當焦點存在時，執行設定”
   ng-blur=“當焦點離開時，執行設定”

   ng-focus="focus=true;blur=false;active=true;" ng-blur="blur=true;focus=false;active=false;" />

完整範例：

http://jsbin.com/EhepoBe/1/edit

參考來源：

[AngularJS]AngularJS 入門教學 - ngFocus 與 ngBlur
http://abgne.tw/angularjs/angularjs-getting-stared/ngfocus-ngblur.html

官方文件
http://docs.angularjs.org/api/ng.directive:ngBlur