关于Angularjs1.x dom ready

最新推荐文章于 2024-08-16 07:40:46 发布

原创最新推荐文章于 2024-08-16 07:40:46 发布 · 749 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #dom #响应式

angular 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个Angular自定义指令，用于监控DOM变化并广播消息，适用于页面加载完毕或ng-repeat完成后的操作。

在ng的响应式应用开发过程中，有时间我们想知道什么时间ng-repeat什么时候结束，以便让页面的loading mask消失，或者计算页面的高度什么的。。。可能有很多人一直以来没有什么好的方式来处理，今天，我就把我的做法跟大家分享一下。

angular.module('domChangedModule',[])
.directive('domChanged',['$rootScope','$interval',function($rootScope,$interval){
    return {
        restrict : 'A',
        link : function(scope,ele,attrs){
            scope.dom = {
                cAt : new Date(),
                oAt : new Date(),
                state : 'steady'
            };
            ele.bind("DOMSubtreeModified", function() {
                scope.dom.cAt = new Date();
            });
            $interval(function(){
                if(angular.equals(scope.dom.cAt,scope.dom.oAt)){
                    if(angular.equals(scope.dom.state,'changing')){
                        $rootScope.$broadcast('DOM:STEADY');
                        scope.dom.state = 'steady';
                    }
                }else{
                    scope.dom.oAt = scope.dom.cAt;
                    scope.dom.state = 'changing';
                    $rootScope.$broadcast('DOM:CHANING');
                }
            },500);
        }
    };
}]);

通常只需要在body上应用这个指令就行了