AngularJs控制器的作用域范围

《开经偈》

无上甚深微妙法

百千万劫难遭遇

我今见闻得受持

愿解如来真实义

控制器的作用域范围的核心要义就是一句话，早懂早超生。哪一句？

AngularJs自动为每一个控制器 ng-controller创建一个作用域$scope，但是每一个作用域$scope只能与ng-controller所在的开始标签，结束标签之间的DOM元素进行数据绑定。

<html ng-app = "app">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
    </head>
    <body>
        <div  ng-controller="initController">
            price: <input type="number" ng-model="price"/><br>
            amount: <input type="number" ng-model="amount"/><br>
            total: {{total()}}
        </div>
        <div ng-controller="destroyController">
            total: {{result()}}
        </div>
    </body>
    <script type="text/javascript">
            function initController($scope, $log) {
                $scope.price = 8.0;
                $scope.amount = 10;
                $scope.total = function() {
                    return $scope.price * $scope.amount;
                }
            }
            function destroyController($scope, $log) {
                $scope.result = function() {
                    /*企图在destroyController作用域中使用initController作用域中的price和amount*/
                    return $scope.price * $scope.amount;
                }
            }
            var app = angular.module("app", []);
            app.controller("initController", initController);
            app.controller("destroyController", destroyController);
    </script>
</html>

效果是这样的：

作用域存在父作用域和子作用域一说，这种父子关系是怎么实现的，又是怎么体现的？

<html ng-app = "app" ng-init="rootParam='C++'">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
    </head>
    <body>
        <div  ng-controller="parentController" ng-init="parentParam='Java'">
            {{rootParam}}<br>
            <div ng-controller="childController">
                {{rootParam}}<br>
                {{parentParam}}<br>
            </div>
        </div>
        
        <div>
            <span>
                当程序加载到ng-app = "app"时，它会认出这是一个模块，它会自动为这个模块生成一个作用域$scope。
                这就是当前模块的根作用域$rootScope，当然模块内部可能还有控制器比如ng-controller="parentController"
                当程序加载到ng-controller="parentController"时，它会自动为控制器创建一个子作用域$scope，注意了，是子作用域，
                什么叫子作用域？相对于父作用域的子作用域。问题是一个作用域怎么就成了另一个作用域的子作用域？因为你是在人家的作用域范围
                (开始标签和结束标签之间定义)之内定义的，所以叫做子作用域。既然是父子关系，那肯定存在财产继承啊，对，父作用域的属性和方法
                可以被子作用域继承，也就是说，可以在子作用域范围内引用父作用域的属性和方法。
            </span>
        </div>
    </body>
    <script type="text/javascript">
            function parentController($scope, $log) {}
            function childController($scope, $log) {}
            var app = angular.module("app", []);
            app.controller("parentController", parentController);
            app.controller("childController", childController);
    </script>
</html>

AngularJs控制器的作用域范围

猜你喜欢