WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Scope


The degree is the coupling part between the HTML (see) and the JavaScript (controller).

The degree is an item with the accessible properties and methods.

The extension is accessible for both the view and the controller.


How to Use the Scope?

When you make a controller in AngularJS, you pass the $scope object as an argument:

Example

Properties made in the controller, can be alluded to in the view:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var application = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>
Try it Yourself »

When adding properties to the $scope object in the controller, the view (HTML) gains admittance to these properties.

In the view, you don't utilize the prefix $scope, you just allude to a propertyname, as {{carname}}.


Understanding the Scope

If we consider an AngularJS application to comprise of:

  • View, which is the HTML.
  • Model, which is the information accessible for the current view.
  • Controller, which is the JavaScript work that makes/changes/evacuates/controls the information.

Then the degree is the Model.

The degree is a JavaScript object with properties and techniques, which are accessible for 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 application = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>
Try it Yourself »

Know Your Scope

It is critical to know which scope you are managing, at any time.

In the two precedents above there is just a single extension, so realizing your degree is not an issue, yet for bigger applications there can be areas in the HTML DOM which can just access certain scopes.

Example

When managing the ng-repeat order, every reiteration has access to the present redundancy object:

<div ng-app="myApp" ng-controller="myCtrl">

<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
Try it Yourself »

Each <li> component approaches the present reiteration object, for this situation a string, which is alluded to by utilizing x.


Root Scope

All applications have a $rootScope which is the degree made on the HTML component that contains the ng-app directive.

The rootScope is accessible in the whole application.

If a variable has a similar name in both the present degree and in the rootScope, the application utilize the one in the present extension.

Example

A variable named "color" exists in both the controller's extension and in the rootScope:

<body ng-app="myApp">

<p>The rootScope's most loved color:</p>
<h1>{{color}}</h1>

<div ng-controller="myCtrl">
    <p>The extent of the controller's most loved color:</p>
    <h1>{{color}}</h1>
</div>

<p>The rootScope's most loved shading is still:</p>
<h1>{{color}}</h1>

<script>
var application = angular.module('myApp', []);
app.run(function($rootScope) {
    $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
    $scope.color = "red";
});
</script>
</body>
Try it Yourself »