加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJs渲染完毕后执行指定操作

发布时间:2020-12-17 10:03:00 所属栏目:安全 来源:网络整理
导读:最近用AngularJs做了一个Web的项目,AngularJs的设计真的很适合CRUD。真的建议很多内部的提高生产力的工具转而采用Web,以AngularJs为框架。 通常的Web程序,我们需要在页面加载完成的时候执行某些特定的操作,在没有AngularJs的时候一般采用的是监听onLoad

最近用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) {

 });

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读