The scope acts as a special JavaScript object for the role of its view connection controller. The scope contains the model data. In the controller, the model data is accessed through the $scope object.
<script>
var mainapp = angular.module ("Mainapp", []);
Mainapp.controller ("Shapecontroller", function ($scope) {
$scope. Message = ' in shape controller ';
$scope. Type = "Shape";
});
</script>
The following are important issues to consider in the above example.
$scope is used as the first parameter in its constructor to determine the metric to the controller.
$scope. Message and $scope. Type are the models they use in HTML pages.
We have set the value of the model to reflect the controller Shapecontroller of the application module.
We can define function functions in $scope.
Inheritance scope
The scope is a specific controller. If we define a nested controller, then the controller child inherits the scope of its parent control.
<script>
var mainapp = angular.module ("Mainapp", []);
Mainapp.controller ("Shapecontroller", function ($scope) {
$scope. Message = ' in shape controller ';
$scope. Type = "Shape";
});
Mainapp.controller ("Circlecontroller", function ($scope) {
$scope. Message = ' in Circle controller ';
});
</script>
The following are important issues to consider in the above example.
We set the value of the model in Shapecontroller.
We overwrite the Circlecontroller message of the child controller. The message to be overridden when the Controller Circlecontroller module in message is used.
Example
The following example shows all of the above instructions.
Testangularjs.html
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller="circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller="squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>
Results
Open textangularjs.html in a Web browser. See the results below.
The above is the ANGULARJS scope of data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
