angular中onload事件

「已注销」

于 2017-09-27 11:45:54 发布

阅读量8.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Blog_BC/article/details/78111281

这篇博客介绍了AngularJS中处理页面加载事件的三种方法：1) 直接在JavaScript中绑定window.onload事件；2) 在控制器中利用$watch监听$viewContentLoaded事件；3) 使用data-ng-init指令在控制器中执行加载时的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一下提供3中load加载的写法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angular中onload事件</title>
    </head>
    <body>
        <div ng-app="dome">
            <div ng-controller="loadevent">
                <span ng-bind=apple></span>
            </div>
            <div ng-controller="test">
                <div data-ng-init="load()" >
                    <span ng-bind=testtext>测试文字</span>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript">
//            1.直接写在js中 不建议这样使用
            angular.element(window).bind('load', function() {
                alert('1');
            });
//             2.在controller里面利用$watch调用$viewContentLoaded事件
            angular.module("dome",["ng"]).controller("loadevent",function($scope){
                $scope.$watch('$viewContentLoaded', function() {
                    $scope.apple = "iphone8 X"
                });
//              3.利用data-ng-init  注意：data-ng-init在controller里面才会启作用
            }).controller('test', function($scope) {
                    $scope.load = function() {
                        $scope.testtext = "code in here"
                    }
                });
        </script>
    </body>
</html>