ANGULARJS中使用JQUERY分頁(yè)控件
首篇，不知寫何物，思來(lái)想去，敬上分頁(yè)控件使用方法，望共同探討。
分頁(yè)乃前端數(shù)據(jù)展現(xiàn)之常用功能，而在我們使用的Angular js中，原生的分頁(yè)需要將數(shù)據(jù)全部取到前端后，然后再到前端分頁(yè)，在大批量數(shù)據(jù)操作時(shí)并不實(shí)用。接下來(lái)，我來(lái)介紹了將一種jquery的分頁(yè)控件修改為Angularjs指令的方法。
首先在web項(xiàng)目中引用jquery1.10、Angularjs庫(kù)文件以及jq-pagination控件。
我降指令名稱為custompagination，為指令添加Html樣式。
然后給指令添加對(duì)應(yīng)的控制器。
指令使用時(shí)，html頁(yè)面代碼如下
對(duì)應(yīng)控制器數(shù)據(jù)獲取的方法為
控件的最終使用效果。
注意事項(xiàng)：jquery控件的調(diào)用更多的是使用一種同步的方式，而Angularjs獲取后臺(tái)數(shù)據(jù)則全部采用的是異步方式，在同時(shí)使用jquery和Angularjs時(shí)需要注意將兩種不同的編程思想結(jié)合起來(lái)。在本例中最大的問(wèn)題是在使用Angularjs獲取后臺(tái)數(shù)據(jù)后如何將新的分頁(yè)情況通知給jquery分頁(yè)控件，然后刷新分頁(yè)控件的頁(yè)面數(shù)據(jù)。本例是在Angularjs和jquery代碼中各進(jìn)行一次回調(diào)來(lái)實(shí)現(xiàn)的。其實(shí)也可以在Angularjs指令中使用watch來(lái)監(jiān)視分頁(yè)控件數(shù)據(jù)的變化達(dá)到刷新頁(yè)面的目的，歡迎各位作進(jìn)一步的探索。
相關(guān)文章
Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
這篇文章主要給大家介紹了關(guān)于Angular框架詳解之視圖抽象定義的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Angular.JS讀取數(shù)據(jù)庫(kù)數(shù)據(jù)調(diào)用完整實(shí)例
這篇文章主要介紹了Angular.JS讀取數(shù)據(jù)庫(kù)數(shù)據(jù)調(diào)用,結(jié)合完整實(shí)例形式分析了AngularJS使用$http.get方法與后臺(tái)php交互讀取數(shù)據(jù)庫(kù)數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
AngularJS全局scope與Isolate scope通信用法示例
這篇文章主要介紹了AngularJS全局scope與Isolate scope通信用法,結(jié)合格式分析了全局scope和directive本地scope相關(guān)功能、通信用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
這篇文章主要介紹了詳解angular2 控制視圖的封裝模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Angularjs 根據(jù)一個(gè)select的值去設(shè)置另一個(gè)select的值方法
今天小編就為大家分享一篇Angularjs 根據(jù)一個(gè)select的值去設(shè)置另一個(gè)select的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Directive是一個(gè)非常棒的功能?？梢詫?shí)現(xiàn)我們自義的的功能方法。下面通過(guò)實(shí)例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2017-05-05
Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗(yàn)證
這篇文章主要介紹了Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗(yàn)證，ng-messages提供了更方便的表單數(shù)據(jù)驗(yàn)證服務(wù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12