WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Scope


Scope is the link between HTML (view) and JavaScript (controller).

Scope is an object with methods and properties available.

Scope can be applied to views and controllers.



How to Use the Scope?

When you create a controller in AngularJS, you can pass a $ scope object as a parameter:

Example

The attributes in the controller correspond to the attributes on 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

The AngularJS application is composed as follows:

  • View, which is HTML.
  • Model, the data available in the current view.
  • Controller, which is a JavaScript function that can add or modify attributes.

scope is the model.

scope is a JavaScript object with properties and methods that can be used in views and controllers.

Example

If you modify the view, the model and controller are updated accordingly:

<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 important to understand the scope you are currently using.

In the above two examples, there is only one scope scope, so it is relatively easy to handle, but in large projects, there are multiple scopes in the HTML DOM, then you need to know the corresponding role of the scope you use Which domain is it.

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> element can access the current duplicate object, which corresponds to a string, and is represented by the variable x.


Root Scope

All apps have a $ rootScope , which works on all HTML elements contained in the ng-app directive.

$ rootScope works across the entire application. It is the bridge of scope in each controller. Values defined with rootscope can be used in various controllers.

Example

When creating a controller, pass $ rootScope as a parameter and use it in your application:

<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 »