[AngularJs] 自訂Directive-下拉式選單

     Angular有許多內建的directive來方便我們對html元素的操作，例:ng-option、ng-repeat…等。除了內建的我們也可以自訂directive來封裝一些常用的功能。本篇重點為如何自訂Directive將某個常用的下拉式選單包裝起來，較詳細的說明可以參考最下方的參考來源。

主要功能:

1. 將常用項目封裝成一個獨立的元素my-select
2. 指定預設值my-selected並與directive作雙向繫結
3. directive對外通知事件

Demo

See the Pen directive-4-scope-event by kimxinfo (@kimxinfo) on CodePen.

程式說明

1. 自訂元素<my-select>
2. 建立directive “mySelect”，在這要注意的是只要是html 上有”-“分隔符號，在js內的要將符號移除，並將後面的字元轉為大寫。
   
3. template:html樣板，也可以使用templateUrl來指定html檔案
4. restrict:”E” 限制為element元素，其它選項有A:attribute,C:class,M:comment可以用。ps:合在一起用也行 例AEC
5. scope:使用"="雙向繫結"mySelected"，ps:等號後若繫結的屬性同名則可以忽略 例:= mySelected，繫結的關係如下
   
6. scope:使用"&"作事件繫結
   
7. link:可視為初始化資料的方法，也可以使用controller來初始化資料，差別在於controller可以在作進一步的操作，例如:透過Inject注入其他服務。

參考來源

https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope
http://blog.johnsonlu.org/angularjs-directive/