前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作。对于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>
最后,在最后一条数据渲染完毕后,brodercast是向子级scope传送事件(命令)。而on()是监听事件,监听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事件判定页面没有变化,所以不予执行!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 孙露《怕什么孤单3CD》深圳音像[WAV分轨]
- s14全球总决赛目前是什么结果 s14全球总决赛赛程结果图一览
- s2TPA夺冠五人名单都有谁 tpa战队s2夺冠队员名单一览
- s13wbg战队成员都有谁 wbg战队s13成员名单一览
- 网友热议《幻兽帕鲁》停售、赔千万日元:那也赚麻了 不亏
- 这谁顶得住 《最终幻想7:重生》尤菲3D作品穿上终极芙蕾娜衣服
- 外媒称PS5pro违背承诺:《蜘蛛侠2》根本没法4K60帧
- 群星.2007-中文十大金曲30周年纪念专辑【RTHK】【WAV+CUE】
- 杨林.1989-留一点爱来爱自己【综一唱片】【WAV+CUE】
- 南合文斗.2007-陪君醉笑三千尘鸟人唱片】【FLAC+CUE】
- 群星《我们的歌第六季 第1期》[320K/MP3][90.72MB]
- 群星《我们的歌第六季 第1期》[FLAC/分轨][456.01MB]
- 李雨寰《Break Free》[320K/MP3][98.39MB]
- 草蜢.2001-《真经典》环球唱片[WAV+CUE]
- 群星.2009-第4届2008十大发烧唱片精选[FLAC+CUE]