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

參考來源


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

這個網誌中的熱門文章

IIS 設定只允許特定IP進入