The scope is the binding part between the HTML (view) and the JavaScript (controller).
A scope is an object with available properties and methods.
The scope is available for both View and Controller.
When you create a controller in AngularJS, you pass the $scope object as an argument:
Example
Properties made in the controller can be referenced in the view:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties.
In the view, you do not use the prefix $scope, and you refer to a property name, like {{carname}}.
Understanding the Scope
If we consider including an AngularJS application:
Controller, which is a JavaScript function that creates/changes/deletes/controls data.
Then there is the scope model.
A scope is a JavaScript object with properties and methods available to both the view and the controller.
Example
If you make changes in the view, the model and the controller will be updated:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>The two examples above only have one scope, so knowing your scope isn’t a problem, but the HTML DOM may contain sections that only have access to certain scopes for larger applications.
Example
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>When working with the ng-repeat directive, each iteration has access to the current iteration object:
Each <li> element has access to the current iteration object, in this case, a string, which is referenced using x.
root scope
Each <li> element has access to the current iteration object, in this case, a string, which is referenced using x.
Root scope
All applications have a $rootScope, the scope created on the HTML element containing the ng-app directive.
RootScope is available throughout the application.
If a variable has the same name in both the current scope and the rootScope, the application uses the one in the current scope.
Example
A variable named “color” exists in both the controller’s scope and the rootScope:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
Leave a Reply