angularjs -- 监听angularJs列表数据是否渲染完毕

　　前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表和表格渲染完毕后，执行点击和选择操作。对于angularjs处理这类问题，最好的方式就是指令 directive。

　　首先，定义指令：

app.directive('onfinishrenderfilters', function ($timeout) {return {restrict: 'A',link: function (scope, element, attr) {if (scope.$last === true) {    //判断是否是最后一条数据$timeout(function () {scope.$emit('ngRepeatFinished'); //向父级scope传送ngRepeatFinished命令
                });}}};
});

　　其次，指令定义完毕后，需要将指令添加到迭代的标签内，此处是<tr>标签

<div class="fixed-table-container" style="margin-right: 0px;"><table class="table table-hover lamp-table"><thead><tr><th></th><th style="text-align: center; " data-field="name_device-id" tabindex="0"ng-repeat="i in provider.geoZoneListHead track by $index" ng-hide=i.bol><div class="th-inner sortable " style="padding-right: 10px">{{i.name}}</div><div class="fht-cell" style="width: 101px;"></div></th></tr></thead><tbody><tr ng-repeat="i in provider.geoZoneList" onfinishrenderfilters><td><input data-index="0" name="btSelectItem" type="radio"value="{{$index}}" ng-click="selectInput($index)"></td><td class="nameId0">{{$index+1}}</td><td class="nameId1">{{i.geoZoneName}}</td><td class="nameId2">{{i.description}}</td><td class="nameId3">{{i.totalNumberOfMembers}}</td><td class="nameId4">{{i.country}}</td><td class="nameId5">{{i.lastUpdateDate}}</td></tr></tbody></table>
</div>

　　最后，在最后一条数据渲染完毕后，$emit用来向父级Scope传送事件(命令)，$brodercast是向子级scope传送事件(命令)。而$scope.$on()是监听事件，监听$emit或者$brodercast是否将事件(命令)传送回来，若事件已传送回来，则表示数据已经渲染完毕，就可以执行以后的其他操作了。

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {var btnList = $("input[name='btSelectItem']");btnList.eq(0).attr("checked","checked");$scope.provider.detalOutlet();
});

　　在没有angularJs的时候一般通过监听onLoad事件来确定页面是否加载完成。但在使用angularJs来渲染页面时，onLoad事件不能保证angularJs是否完成了对页面的渲染。最常见的情况就是用angularJs来加载某个数据Table时，我们得等这个Table加载完之后对Table上的数据进行操作，但因为这个Table是由AngularJs渲染的，所以得找到某个方法获得AngularJs渲染完毕后的事件。这也就是为什么onload事件在angularJs框架上数据刷新不执行的一个原因，因为angularJs是数据驱动，根据数据的更新进行页面的刷新，而整体页面已经加载完成(数据更新，angularJs数据渲染，页面不会重新加载)，故onload事件判定页面没有变化，所以不予执行！

转载于:https://www.cnblogs.com/donghuang/p/8474563.html

angularjs -- 监听angularJs列表数据是否渲染完毕相关推荐

深究AngularJS——监听模型$watch
前言 1.$watch是scope内置的函数,它的作用是用来监听数据的变化. 2.$watch可监听哪些数据? 单个对象的属性需要计算的结果(函数) 3. 语法: $scope.$watch(F,M ...
android列表项点击事件,Android 开发 tips(2):监听 Listview 列表项点击事件
Android 开发 tips(2):监听 Listview 列表项点击事件 (这篇和上篇本来是应该一起写的,但是太过冗长,附链接:[SimpleAdapter 在 Listview 中的应用] ht ...
微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...
安卓网络连接全解：包括网络连接状态的监听、网络数据使用状态的监听、获取当前网络连接情况、启动wifi、获取当前连接wifi的网络情况、扫描wifi热点
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓网络连接情况全解:包括网络连接状态的监听.网络数据使用状态的监听.获取当前网络连接情况.启动wifi.获取当前连接wifi的网络情况.扫描wifi ...
Uniapp-微信小程序实现全局事件监听并进行数据埋点
Uniapp-微信小程序实现全局事件监听并进行数据埋点零.前言最近接到需求,领导希望使用微信开放平台上免费的We分析进行数据埋点,但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改,笔 ...
Vue父组件传子组件数据中，Vue监听不到数据改变
Vue父组件传子组件数据中,Vue监听不到数据改变官方文档说明(引用来自官网) 检测变化的注意事项由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来 ...
React Hook 监听路由切换实时同步渲染页面功能
场景对于全局共用的顶部,需要在不同的路由状态下显示不同的信息.而一般情况下顶部通栏都是公共组件,一次引入各个页面通用.所以需要监听路由变化,实时渲染页面功能. // App.tsx export d ...
python监听扫码枪扫描数据
背景:当扫码枪扫描达到输入的数量N时,自动调用打印机打印N个数据的二维码. 实现:因为需要一直监听扫码枪扫描数据的状态,因此创建线程.但是在调试的时候发现,扫码枪扫描的数据并不是一次性出来的,而是一个 ...
使用canal监听binlog将数据发送到RocketMQ同步到es
写在前面今天不学习,明天变垃圾.最近在学习如何使用canal监听binlog并且将数据同步到es,俗话说好记性不如烂笔头,所以写一篇文章记录一下,一是为了健忘的自己,二是为了恰好有此需求的小可爱(程 ...

angularjs -- 监听angularJs列表数据是否渲染完毕

angularjs -- 监听angularJs列表数据是否渲染完毕相关推荐

最新文章

热门文章