angularjs封裝bootstrap時(shí)間插件datetimepicker
背景:angular與jquery類庫(kù)的協(xié)作
第三方類庫(kù)中,不得不提的是大名鼎鼎的jquery,現(xiàn)在基本上已經(jīng)是國(guó)內(nèi)web開發(fā)的必修工具了。它靈活的dom操作,讓很多web開發(fā)人員欲罷不能。再加上已經(jīng)很成熟的jquery UI 庫(kù)和大量jquery 插件,幾乎是一個(gè)取之不盡用之不竭的寶庫(kù)。然而,它是否能與angularjs結(jié)合呢?
很多angularjs原教旨主義者對(duì)此持否定態(tài)度。他們認(rèn)為,既然已經(jīng)使用了angularjs做web應(yīng)用框架,那就必須避免其他類庫(kù)的干擾,做純凈的MvvM模式應(yīng)用。任何類似jquery的dom操作,都是不潔的。把所有和界面相關(guān)的, 比如dom操作, 都放在directive中, 這樣頁(yè)面中directive而沒(méi)有代碼,跟JSF思想一致。MVVM,DSL,組件化的思想這才是web的趨勢(shì)。嗯,想法很好,原教旨主義者想法都是這么純潔。但事實(shí)情況是,使用了angularjs我們就離不開jquery。
眾所周知,angularjs里面事實(shí)上已經(jīng)內(nèi)置了jquery lite.,而且angularjs源碼中很多方法直接就是使用jquery方法。例如angularjs的事件綁定機(jī)制。既然先知們都在用,我們又何苦不用?組件化的思想沒(méi)有錯(cuò),但沒(méi)必要因此把自己的手腳綁住。唯一要注意的問(wèn)題是,不要用jquery的代碼破壞了angularjs的結(jié)構(gòu)。(原文鏈接:http://www.angularjs.cn/A0fG)
案例:用angular封裝bootstrap官網(wǎng)的時(shí)間插件
使用說(shuō)明:
在原先bootstrap-datetimepicker的html片段上添加ng-model='timepickerTest' ng-time
代碼在github上的存放地址:https://github.com/cynthiawupore/ui-bootstrap-datetimepicker
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- AngularJS 日期格式化詳解
- 詳解Angularjs在控制器(controller.js)中使用過(guò)濾器($filter)格式化日期/時(shí)間實(shí)例
- Angularjs中使用layDate日期控件示例
- Angular指令封裝jQuery日期時(shí)間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
- Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間
- Angular4.0中引入laydate.js日期插件的方法教程
- angularjs實(shí)現(xiàn)時(shí)間軸效果的示例代碼
- bootstrap timepicker在angular中取值并轉(zhuǎn)化為時(shí)間戳
- 基于datepicker定義自己的angular時(shí)間組件的示例
- AngularJS日期格式化常見(jiàn)操作實(shí)例分析
相關(guān)文章
AngularJS與BootStrap模仿百度分頁(yè)的示例代碼
分頁(yè)在很多時(shí)候都能用到,這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁(yè)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05對(duì)Angular.js Controller如何進(jìn)行單元測(cè)試
這篇文章主要給大家介紹了如何對(duì)Angular Controller進(jìn)行單頁(yè)測(cè)試。如果你不太了解angular也沒(méi)關(guān)系,本文也會(huì)提及關(guān)于Angular的一些知識(shí)。文中通過(guò)示例代碼介紹的很詳細(xì),詳細(xì)對(duì)大家的理解和學(xué)習(xí)很有幫助,下面來(lái)一起看看吧。2016-10-10Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)
這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-03-03詳解關(guān)于Angular4 ng-zorro使用過(guò)程中遇到的問(wèn)題
這篇文章主要介紹了詳解關(guān)于Angular4 ng-zorro使用過(guò)程中遇到的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12基于angular實(shí)現(xiàn)模擬微信小程序swiper組件
這篇文章主要介紹了基于angular實(shí)現(xiàn)模擬微信小程序swiper組件 ,需要的朋友可以參考下2017-06-06詳解在 Angular 項(xiàng)目中添加 clean-blog 模板
本篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加 clean-blog 模板,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-07-07Angular2使用Angular CLI快速搭建工程(一)
這篇文章主要介紹了Angular2使用Angular CLI快速搭建工程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05