1. 程式人生 > >AngularJs渲染完畢後執行指定操作

AngularJs渲染完畢後執行指定操作

最近用AngularJs做了一個Web的專案,AngularJs的設計真的很適合CRUD。真的建議很多內部的提高生產力的工具轉而採用Web,以AngularJs為框架。
通常的Web程式,我們需要在頁面載入完成的時候執行某些特定的操作,在沒有AngularJs的時候一般採用的是監聽onLoad event。但在使用AngularJs來渲染頁面時,onLoad不能保證AngularJs已經完成了頁面的渲染。最常見的情況就是用AngularJs來載入某個資料Table,我們得等這個Table載入完之後對Table上的資料進行操作,但因為這個Table是由AngularJs渲染的,所以得找到某個方法獲得AngularJs渲染完畢後的事件。
AngularJs原生directive或Method沒有提供這種功能,現在普遍的做法是通過寫一個directive繫結到我們需要監聽的元素上去獲得該元素的渲染完畢事件,現在就以ng-repeat為例:

具體的方法有兩種,一種是回撥函式,一種的事件通知。為了簡便,把兩種方法寫到一起了:

View

<ul>
  <li ng-repeat="item in items" on-finish-render="callMethod()">
      dummy Text
  </li>
</ul>

Directive

.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
    return {
        restrict: 'A'
, link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); //事件通知 var fun = $scope.$eval(attrs.onFinishRender); if(fun && typeof
(fun)=='function'){ fun(); //回撥函式 } }); } } } }])

事件處理

//捕獲 emited event
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {

 });

相關推薦

AngularJs渲染完畢執行指定操作

最近用AngularJs做了一個Web的專案,AngularJs的設計真的很適合CRUD。真的建議很多內部的提高生產力的工具轉而採用Web,以AngularJs為框架。 通常的Web程式,我們需要在頁面載入完成的時候執行某些特定的操作,在沒有AngularJs

AngularJs--ng-repeate渲染完畢執行的程式碼

AngularJs呈現頁面的原理 AnguarJs提供了一些對於Html進行加強的語義標籤(directive),這些標籤在瀏覽器載入完頁面後被執行。舉例來說: <div ng-controller="ctrl2"> <inpu

spring boot容器加載完執行特定操作

文件中 code buck 線程 private tor tope gets send 有時候我們需要在spring boot容器啟動並加載完後,開一些線程或者一些程序來幹某些事情。這時候我們需要配置ContextRefreshedEvent事件來實現我們要做的事情

在HTML頁面載入完畢執行某個js

在DOM載入完就可以執行(比window.onload更早)。在同一頁面中可以多次出現.ready() 兩者主要區別:Window.onload=function (){}: 當一個文件完全下載到瀏覽器中時,才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操

ajax非同步上傳檔案完成執行其他操作

var fileCount=檔案個數;//計數器 $.ajax({             //寫死測試             url: baseUrl + "/dfs/upload/plugins/fileproxy/fileproxy?type=upload&

微信小程式之tab切換執行onload操作

小程式tab切換後,不會執行onload操作,那麼我們在某tab列表進入詳情後,再次返回列表,需要重新重新整理頁面,該如何處理? 程式碼如下: 在呼叫wx.switchTab後,通過success操作,呼叫getCurrentPages().pop()方法獲取上一個頁面的

在Spring Boot啟動執行指定程式碼

在開發時有時候需要在整個應用開始執行時執行一些特定程式碼,比如初始化環境,準備測試資料等等。 在Spring中可以通過ApplicationListener來實現相關的功能,不過在配合Spring Boot使用時就稍微有些區別了。 建立ApplicationList

HTML頁面載入完畢執行某個js

1、js方法: <script type="text/javascript"> window.onload=function(){ alert("html頁面載入完成後一"); } </script> 2、jQuery方法:(需要引用j

利用angular指令監聽ng-repeat渲染完成執行函式

很多時候,我們需要在ng-repeat渲染完成後再對其進行操作,那麼怎麼知道什麼時候渲染完成呢?今天工作中就遇到了這個問題,在網上查了一下,感謝大神的無私分享,整理了一下,加深記憶1.在ng-repea

JS頁面載入完畢執行的多種方式和比較

做專案的時候可能會遇到這種情況:   一個頁面的中定義了多個onload事件,那麼在此定義window.onload函式的時候可能會不生效或者多個onload之間覆蓋的現象.   有的朋友肯定會說用jQuery的$$(document).ready(func

兩種方法實現在HTML頁面載入完畢執行某個js:

Js方法:<script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert(userName); } </script&

利用angular指令監聽ng-repeat渲染完成執行指令碼

業務中有時需要在非同步獲取資料並用ng-repeat遍歷渲染完頁面後執行某個操作,angular本身並沒有提供監聽ng-repeat渲染完成的指令,所以需要自己動手寫。有經驗的同學都應該知道,在ng-repeat模板例項內部會暴露出一些特殊屬性$index/$first/$middle/$last/$o

Vue 如何在頁面渲染操作dom,而且只執行一次

在介面請求成功的回撥裡使用 this.$nextTick(() =>{ // 在這裡面去獲取DOM })。 在mounted生命週期,元件掛載成功,但還未渲染,自然獲取不到相關的DOM節點。看你資料好像不是前端,舉個更簡單的例子,你在html中,把 consol

線程池: 等待線程池內所有線程執行完畢再繼續任務

繼續 con col await mina cut bsp src code boolean loop = true; do{ loop=!executorService.awaitTermination(2, TimeUnit.SECONDS); }while(

並發實戰:多線程處理任務,結束執行後續操作

batch add 批次 for return countdown executors 操作 current 場景: 分批從大列表 blist 讀取數據,執行驗證過濾,符合條件的加入到列表中。然後執行批量入庫操作。 思路: 多任務從 blist 取數據執行,采用Excuet

CentOS安裝完畢操作

linux CentOS 系統安裝完成後0.網絡安裝費結束後需要修改# vi /etc/sysconfig/network-scripts/ifcfg-ens33TYPE=EthernetBOOTPROTO=dhcpDEFROUTE=yesPEERDNS=yesPEERROUTES=yesIPV4_F

avaScript實現頁面到滾動到指定位置執行某些操作

點擊 希望 ava pdo bsp log scroll 指定位置 blog 比如 頁面中 某個DOM, 希望點擊按鈕後頁面直接跳轉到 這個DOM所在的位置, 1. 獲取DOM離屏幕的高度 var hTop = $(‘#box‘).offset().top; $(‘bod

當redis執行flush操作的補救措施

文件 type nag ext code 並保存 說明 write roc redis誤操作flushall的補救措施前提:開啟了aof持久化註意: 當執行了flushall或者flushdb等手殘命令,切記千萬不要觸發aof重寫 可以利用config set命令將如下

cin結束再次執行輸入操作

今天使用cin迴圈讀入int型變數,while(cin>>i) 發現結束迴圈後想再次接受鍵盤輸入時不成功,直接退出了。 這是什麼原因呢? cin遇到ctrl+z便認為輸入結束,也就是不再接受鍵盤的輸入(但是它會讀取緩衝區已經存在的資料),此時ctrl+z還是會留在緩衝區內

svn執行update操作出現:Error : Previous operation has not finished; run 'cleanup' if it was interrupted.

【轉載】原文連結:https://blog.csdn.net/JINYUANCAI/article/details/68922372 svn執行update操作後出現: Error : Previous operation has not finished; run ‘cleanup’