AngularJS实战之渲染完数据后执行js

使用自定义指令当ng-repeat加载完数据后执行js方法。

实战案例:
问题:使用datatables+angular生成表格时,往往是循环去生成表体内容,而我们也需要当数据完全加载生成出来后再执行datatables的渲染方法,如何实现呢?

自定义了一条指令:

//on-finish-render="ngRepeatFinished"  load js after render datas
UserManagerApp.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>
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值