Angular Scope
AngularJS Scope
The range is the binding constituent betwixt the HTML (view) in addition to the JavaScript (controller).
The range is an object amongst the available properties in addition to methods.
The range is available for both the sentiment in addition to the controller.
How to Use the Scope?
When you lot brand a controller inwards AngularJS, you lot overstep the$scope object equally an argument:Example
Properties made inwards the controller, tin endure referred to inwards 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> $scope object inwards the controller, the sentiment (HTML) gets access to these properties.In the view, you lot exercise non occupation the prefix
$scope, you lot only refer to a propertyname, similar {{carname}}.Understanding the Scope
If nosotros catch an AngularJS application to consist of:- View, which is the HTML.
- Model, which is the information available for the electrical flow view.
- Controller, which is the JavaScript constituent that makes/changes/removes/controls the data.
The range is a JavaScript object amongst properties in addition to methods, which are available for both the sentiment in addition to the controller.
Example
If you lot brand changes inwards the view, the model in addition to the controller volition endure updated: <div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My lift is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script> Know Your Scope
It is of import to know which range you lot are dealing with, at whatever time.In the 2 examples to a higher house in that place is entirely 1 scope, in addition to then knowing your range is non an issue, but for larger applications in that place tin endure sections inwards the HTML DOM which tin entirely access sure enough scopes.
Example
When dealing amongst theng-repeat directive, each repetition has access to the electrical flow repetition object: <div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x inwards names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script> <li> chemical component has access to the electrical flow repetition object, inwards this instance a string, which is referred to past times using x. Root Scope
All applications convey a$rootScope which is the range created on the HTML chemical component that contains the ng-app directive.The rootScope is available inwards the entire application.
If a variable has the same lift inwards both the electrical flow range in addition to inwards the rootScope, the application uses the 1 inwards the electrical flow scope.
Example
H5N1 variable named "color" exists inwards both the controller's range in addition to inwards the rootScope: <body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The range 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";
});
</script>
</body> 
Comments
Post a Comment