iT邦幫忙

DAY 24
0

開發 Mobile 手機的新一代霸主-ionic framework系列 第 24

ionic 實作(13): ionic 中封裝 angular的 directive

  • 分享至 

  • xImage
  •  

AngularJS Directive 介紹

https://docs.angularjs.org/guide/directive

https://github.com/driftyco/ionic/tree/master/js/angular/directive

簡單的說,我們可能會把一些畫面上的UI (HTML Code) 封裝成一個component,當封裝成component之後,就可以在許多的畫面上可以很簡單的就可以實現UI元件了,在ionic 中目前有40多個directive 元件可以使用。

例如:ioic-list 與 ioic-item 就是非常好的典型例子

有興趣的可以參考source : https://github.com/driftyco/ionic/blob/master/js/angular/directive/list.js#L1

來一個比較常見的 ion-content,應該不陌生吧,之前我們在撰寫的view ,每一頁都會使用到 ionic-content

網址 : http://ionicframework.com/docs/api/directive/ionContent/

簡單範例: youtube

我之前為了讓 手機可以跑 youtube ,所以上網找了一個範例並且小修改了一下,就可以在手機上播放 youtube的影片了

同 service 的做法,我在module中加上了一個 directive 命名為 youtube

在view page 就可以簡單的使用了

如果對於封裝directive不熟,其實google 一下都會有許多人封裝好的directive都可以拿來使用,只要清楚如何把directive掛到module一切就大功告成了


上一篇
ionic 實作(12): ionic 中封裝 angular的 Service
下一篇
ionic 實作(14): Master Detail Pattern
系列文
開發 Mobile 手機的新一代霸主-ionic framework30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言