利用angular指令監聽ng-repeat渲染完成後執行函式
很多時候,我們需要在ng-repeat渲染完成後再對其進行操作,那麼怎麼知道什麼時候渲染完成呢?
今天工作中就遇到了這個問題,在網上查了一下,感謝大神的無私分享,整理了一下,加深記憶
1.在ng-repeat模板例項內部會暴露出一些特殊屬性$index/$first/$middle/$last/$odd/$even,$index會隨著每次遍歷(從0開始)遞增,當遍歷到最後一個時,$last的值為true,我們可以通過判斷$last的值來監聽ng-repeat的執行狀態,怎麼在遍歷過程中拿到$last的值:自定義指令
指令能夠複用最好,可以通過給指令指定一個處理函式renderFinish
<div id="box"> <span ng-repeat="item in data" repeat-finish="renderFinish()">{{item.str}}</span> </div>
再通過指令的attr引數獲取這個處理函式
app.directive('repeatFinish',function(){ return { link: function(scope,element,attr){ console.log(scope.$index) if(scope.$last == true){ console.log('ng-repeat執行完畢') scope.$eval( attr.repeatFinish ) } } } }) //controller裡對應的處理函式 $scope.renderFinish = function(){ console.log('渲染完之後的操作') }
attr獲取到的屬性只是一個字串表示式,$scope.$eval方法是專門執行AngularJS表示式的,通過它處理函式得以執行,這樣,指令用在不同的地方,可傳遞不同的處理函式。
2.使用$timeout也可以達到效果(我感覺此方法比1方法好用),下面是程式碼
app.directive('timeOut',function($timeout){ return { link: function(scope,element,attr){ $timeout(function(){ //這裡是要執行的程式碼 },0) } } });
相關推薦
利用angular指令監聽ng-repeat渲染完成後執行函式
很多時候,我們需要在ng-repeat渲染完成後再對其進行操作,那麼怎麼知道什麼時候渲染完成呢?今天工作中就遇到了這個問題,在網上查了一下,感謝大神的無私分享,整理了一下,加深記憶1.在ng-repea
利用angular指令監聽ng-repeat渲染完成後執行指令碼
業務中有時需要在非同步獲取資料並用ng-repeat遍歷渲染完頁面後執行某個操作,angular本身並沒有提供監聽ng-repeat渲染完成的指令,所以需要自己動手寫。有經驗的同學都應該知道,在ng-repeat模板例項內部會暴露出一些特殊屬性$index/$first/$middle/$last/$o
AngularJS監聽ng-repeat渲染完成後事件
1.在html,加上on-finish-render-filters="completeRepeat" <li ng-repeat="categorie in result.categories" ng-click="clickCategory($index,cate
angularJs監聽ng-repeat渲染完成
監聽ng-repeat渲染完成有兩種方法 一、最實用的方法: <ul class="pprt_content"> <li ng-repeat="src in i
AngularJS中ng-repeat渲染完成事件和中間變數的引用
ng-repeat渲染完成事件 因為在用AngularJS期間, 經常用到ng-repeat, 而有時需要在其渲染完成時操作已經渲染的物件, 所以特在此記錄一下新增渲染事件的方法, 以方便以後的使用; 程式碼如下 myApp.directive('onRepeatFin
AngularJs--ng-repeate渲染完畢後執行的程式碼
AngularJs呈現頁面的原理 AnguarJs提供了一些對於Html進行加強的語義標籤(directive),這些標籤在瀏覽器載入完頁面後被執行。舉例來說: <div ng-controller="ctrl2"> <inpu
angular監聽dom渲染完成,判斷ng-repeat迴圈完成
一、前言 最近做了一個圖片懶載入的小外掛,功能需要dom渲染完成後,好獲取那些需要懶載入的dom元素。那麼問題來了,如果只是感知靜態的dom用ready,onload都可以,但專案用的angular,ng-repeat什麼時候迴圈完,或者說angular自身的生命週期中dom渲染完成怎麼知道,這裡做個解決問
結合錨點利用滾動條監聽跳轉
關於 家居 col eat span tom odi ack 分享 每一個錨點都相當於一個完整的模塊,正好占滿一個屏幕,滾動可以直接跳轉錨點, <body> <!--頭部開始--> <div id="header">
JS奇技之利用scroll來監聽resize詳解
前言大家都知道知道原生的 resize 事件只能作用於 defaultView 即 window 上,那麼我們應該通過什麼樣的方式來監聽其他元素的大小改變呢?筆者最近學習發現了一種神奇的方法,通過 scroll 事件來間接實現 resize 事件的監聽,本文將對這種方式進行原理的剖析與程式碼實現。原理首先,我
angular.js中的ng-repeat限制迴圈次數limtTo()(專案總結)
之前做專案的時候是用老的angular.js做的,之前迴圈遍歷一直都是用ng-repeat,用ng-repeat的時候可以限制迴圈的次數,就是用limtTo,請看示例: <div class="tgw-desc-lie"> <div class=
Android 監聽activity填充渲染完畢
我也不知道是不是專門用來監控Activity的。但通過這個事件可以實現當一個Activity完全載入完畢後,然後就執行。 1 2 3 4 5 @Override public void onWindowFocusChanged(boolean hasFocus
angular 事件監聽,內建事件
對於一款前端框架,提起事件,很容易讓人聯想到DOM事件,比如說滑鼠點選以及頁面滾動等。但是我們這裡說的angular中的事件和DOM事件並不是一個東西。 事件的釋出 我們可以通過$emit()以及$broadcast()來發布事件 $emit(name, args)
Android利用系統廣播---監聽應用程式安裝和解除安裝
第一、 新建監聽類:BootReceiver繼承BroadcastReceiver Java程式碼 publicclass BootReceiver extends BroadcastReceiver { @Overridepublicvoid onRec
vue 監聽路由變化,dom載入完成後執行程式碼
watch 監聽路由變化,且dom渲染完成後執行函式 專案中在頁面中用到了footer,為了在頁面內容不超過螢幕高度時將footer定位置底,超過螢幕高度時不做定位,正常在內容最底部顯示,運用瞭如下方式問題:若不在dom渲染後執行,獲取的高度是不正確的. watch: {
ionic監聽android息屏和後臺執行的生命週期
Hi,寶寶們,我又來了,我最近遇到一個問題,就是在ionic中監聽android的息屏、應用退出在後臺執行,之後重新進入應用的事件,這個寫過原生的都知道,android會在不用的時間,執行不同的生命週期,息屏(onPause->onStop),activity再次進入活
ionic 輪播用ng-repeat遍歷後不顯示問題
今兒拿到後臺輪播資料做遍歷時,發現個有趣的問題。 無論我怎麼!它都不顯示!!這太他媽有趣了 程式碼沒毛病,那問題就出現在我粗淺的認知上了。經查詢,$ionicSlideBoxDelegate 這個東西問題很大! 解決方案: 1、將$ionicSlideBoxDelegate
2017-03-05 CentOS中配置守護服務(Supervisor)監聽dotnet core web程式的執行
我們繼續解決上篇部落格的問題,我這個人有個毛病,不喜歡遺留什麼問題,也不喜歡問題說不明白,具體要怎麼解決一定要詳盡,因為經常自己遇到問題的時候,去翻別人的部落格,就會遇到這樣的問題,很苦惱,又說廢話了
android 監聽整個介面載入完成的方法
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); View view = (View
GCD實現單個頁面多個網路請求,需要監聽所有網路請求結束後重新整理UI的處理
dispatch_group_t group = dispatch_group_create(); dispatch_queue_t serialQueue = dispatch_queue_create("com.tikeyc.tikeyc", DISPATC
phonegap監聽backbutton點選事件後,其他頁面點選回退鍵出現無反應現象
phonegap版本:4.2.0 問題描述: 比如我們有三個頁面,分別是main.html,page1.html,page2.html。我們有這樣的需求:當在main.html頁面點選回退鍵時要退出程式(預設是返回上一頁),在page1.html或者page2.html上