angular中如何监控页面加载完毕

最新推荐文章于 2025-05-28 14:17:23 发布

原创最新推荐文章于 2025-05-28 14:17:23 发布 · 2.7w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#angular

angularJS 专栏收录该内容

19 篇文章

订阅专栏

本文探讨了在Angular中监控页面加载完毕的各种方法，包括控制器中的on或watch、data-ng-init、Angular自身的angular.element(window)、jQuery方法以及$timeout。尽管$timeout可实现DOM加载后的操作，但并不推荐用于样式变化，建议使用ng-class指令。文章提供了示例代码下载链接和相关文章参考。

一，网上一些不起作用的方法

1，在controller里面利用 $on或者$ watch

$scope.$on('$viewContentLoaded', function() {  
    alert('1');  
});

$scope.$watch('$viewContentLoaded', function() {  
    alert('1');  
});

2，利用data-ng-init

<div ng-controller="test">  
     <div data-ng-init="load()" ></div>  
</div>

 $scope.load = function() {  
      alert('code here');  
 }

二，网上起作用的方法（只在初始化界面起作用）

此方法调用的angular的方法，angular.element(window)并没有转变为jquery对象，这可能是个特例，不引入jquery就起作用！

angular.element(window).bind('load', function() {  
    alert('1');  
});

三，jquery的方法（需要引入jquery）（只在初始化界面起作用）

angular.element(document).ready(function () {
    alert('1'); 
});

四，$timeout的方法（在方法中急用，但不建议使用）

在方法中$timeout中内容会最后执行，相当于dom加载完再执行，
但多数情况要监控dom加载完是为了变化样式，推荐使用angular自己的指令ng-class去变样式

$scope.setStyle = function(){
    var a = $timeout(function(){
        var radio = angular.element('.item-radio')[2];
        angular.element(radio).addClass("select"); 
    });

    $scope.clientSideList = tempData; 
  }