MSVA/area.html at master · jackeyyang/MSVA · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!doctype html>
<html ng-app="myApp">
<head>
    <style>
        #parentCtrl {
            background-color: yellow;
            padding: 10px;
        }
        #childCtrl {
            background-color: green;
            padding: 10px;
        }
    </style>
</head>
<body>

<p>We can access: {{ rootProperty }}</p>
<div id="parentCtrl" ng-controller="ParentCtrl">
    <p>We can access: {{ rootProperty }} and {{ parentProperty }}</p>
    <div id="childCtrl" ng-controller="ChildCtrl">
        <p>
            We can access:
            {{ rootProperty }} and
            {{ parentProperty }} and
            {{ childProperty }}
        </p>
        <p>{{ fullSentenceFromChild }}</p>
    </div>
</div>
<script src="asset/js/angular.js"></script>
<script>
    angular.module('myApp', [])
            .run(function($rootScope) {
                // use .run to access $rootScope
                $rootScope.rootProperty = 'root s';
            })
            .controller('ParentCtrl', function($scope) {
                // use .controller to access properties inside `ng-controller`
                // in the DOM omit $scope, it is inferred based on the current controller
                $scope.parentProperty = 'parent s';
            })
            .controller('ChildCtrl', function($scope,$rootScope) {
                $scope.childProperty = $rootScope.rootProperty;
                // just like in the DOM, we can access any of the properties in the
                // prototype chain directly from the current $scope
                $scope.fullSentenceFromChild = 'Same $scope: We can access: ' +
                        $scope.rootProperty + ' and ' +
                        $scope.parentProperty + ' and ' +
                        $scope.childProperty
            });
</script>

</body>
</html>