1. ホーム

angularのonloadイベント

2022-02-24 21:22:29
A writeup of the load loading in 3 is provided below.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onload event in angular</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>test text</span> </div> </div> </div> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript"> // 1. Write directly in js This is not recommended angular.element(window).bind('load', function() { alert('1'); }); // 2. Call the $viewContentLoaded event with $watch inside the controller angular.module("dome",["ng"]).controller("loadevent",function($scope){ $scope.$watch('$viewContentLoaded', function() { $scope.apple = "iphone8 X" }); // 3. Use data-ng-init Note: data-ng-init will only work inside the controller }).controller('test', function($scope) { $scope.load = function() { $scope.testtext = "code in here" } }); </script> </body> </html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>onload event in angular</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>test text</span>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript">
// 1. Write directly in js This is not recommended
            angular.element(window).bind('load', function() {
                alert('1');
            });
// 2. Call the $viewContentLoaded event with $watch inside the controller
            angular.module("dome",["ng"]).controller("loadevent",function($scope){
                $scope.$watch('$viewContentLoaded', function() {
                    $scope.apple = "iphone8 X"
                });
// 3. Use data-ng-init Note: data-ng-init will only work inside the controller
            }).controller('test', function($scope) {
                    $scope.load = function() {
                        $scope.testtext = "code in here"
                    }
                });
        </script>
    </body>
</html>