"Opening Verses"
the most profound subtlety
Hundreds of thousands of catastrophe
I have seen and heard today
Wish to understand the true meaning of Tathagata
The core meaning of the scope of the controller is a sentence, early understanding and early life. Which sentence?
AngularJs automatically creates a scope $scope for each controller
ng-controller
, but each scope $scope can only be data bound to the DOM element between the start tag and the end tag of the ng-controller.
<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() {
/* Attempt to use price and amount from initController scope in destroyController scope */
return $scope.price * $scope.amount;
}
}
var app = angular.module("app", []);
app.controller("initController", initController);
app.controller("destroyController", destroyController);
</script>
</html>
The effect is this:
The scope has a parent scope and a child scope. How is this parent-child relationship realized and how is it reflected?
<html of-app = "app" of-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 of-controller = "parentController" of-init = "parentParam = 'Java'">
{{rootParam}}<br>
<div ng-controller="childController">
{{rootParam}}<br>
{{parentParam}}<br>
</div>
</div>
<div>
<span>
When the program is loaded with ng-app = "app", it will recognize that this is a module, and it will automatically generate a scope $scope for this module.
This is the root scope $rootScope of the current module. Of course, there may be controllers inside the module such as ng-controller="parentController"
When the program is loaded into ng-controller="parentController", it will automatically create a child scope $scope for the controller, note that it is a child scope,
What is a subscope? A child scope relative to the parent scope. The question is how can one scope be a child scope of another? Because you are in the scope of others
(defined between the start tag and the end tag), so it's called a child scope. Since it is a parent-child relationship, there must be property inheritance, yes, the properties and methods of the parent scope
Can be inherited by child scopes, that is, properties and methods of parent scope can be referenced in child scope 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>