AngularJS实战之渲染完数据后执行js
来源:互联网 发布:java程序员专用壁纸 编辑:程序博客网 时间:2024/05/16 04:22
使用自定义指令当ng-repeat加载完数据后执行js方法。
实战案例:
问题:使用datatables+angular生成表格时,往往是循环去生成表体内容,而我们也需要当数据完全加载生成出来后再执行datatables的渲染方法,如何实现呢?
自定义了一条指令:
//on-finish-render="ngRepeatFinished" load js after render datasUserManagerApp.directive('onFinishRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); }); } } }});
解释下:
link中当scope中的$last(也就是最后一条数据),加载完毕后触发’ngRepeatFinished’。
scope.$emit(‘ngRepeatFinished’);这句话就相当于trigger,会触发定义的事件监听:
也就是我们在controller中会添加:
$scope.$on('ngRepeatFinished', function( ngRepeatFinishedEvent ) {})
注:记得在html中需要加载数据的位置增加指令属性哦!
<tr ng-repeat="item in userList" on-finish-render>
2 0
- AngularJS实战之渲染完数据后执行js
- angularjs-渲染完数据后执行js
- AngularJs数据渲染到视图后再执行操作
- AngularJs渲染完毕后执行指定操作
- AngularJs--ng-repeate渲染完毕后执行的代码
- 03、vue.js 之数据渲染
- angularJs中修改controller后的数据没有重新渲染页面
- JS执行与页面渲染
- angularjs列表数据是否渲染完毕
- 《AngularJS》--监听angularjs列表数据是否渲染完毕
- express 获取数据后渲染
- js之页面渲染
- Vue监听数据渲染DOM完以后执行某个函数
- angularjs源码分析之:angularjs执行流程
- angularjs源码分析之:angularjs执行流程
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面
- AngularJs之数据绑定
- 【Spring实战】Spring容器初始化完成后执行初始化数据方法
- JAVA字符串格式化-String.format()的使用
- lsd-slam源码解读第一篇:Sophus/sophus
- lua 读取lua文件
- CSAPP: Bomb Lab(2)
- 使用JMeter进行负载测试——终极指南
- AngularJS实战之渲染完数据后执行js
- struts2文件下载
- 怎么使用github
- AIDL介绍和实例讲解
- JMeter基础之--元件的作用域与执行顺序
- 互联网协议入门-通俗易懂的讲计算机网络5层结构
- PHP小常识分享
- 第十六周项目2——用文件保存的学生名单
- JMeter基础之—录制脚本