AngularJS Scopes

Scope (scope) is the binding part between HTML (view) and JavaScript (controller).

Scope is an object that has available properties and methods.

Scope is available to both the view and the controller.

How to use scope?

When you create a controller in AngularJS, you will $scope Object as a parameter:

Instance

Properties created 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>

Try It Yourself

When adding properties to the controller,} $scope When adding properties to an object, the view (HTML) can access these properties.

In the view, you do not use $scope Prefix, you just need to refer to a property name, such as {{carname}}.

Understand the scope

If we view the AngularJS application as being composed of the following parts:

  • View, which is HTML.
  • Model, which is the data available to the current view.
  • Controller, which is a JavaScript function, is used to create/modify/delete/control data.

Then the scope is the model.

The scope is a JavaScript object with properties and methods that are available to both the view and the controller.

Instance

If you make changes in the view, the model and 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 = "Bill Gates";
});
</script>

Try It Yourself

Understand your scope

It is important to understand the scope you are dealing with at any time.

In the above two examples, there is only one scope, so understanding your scope is not a problem, but for larger applications, some parts of the HTML DOM may only be accessible to certain scopes.

Instance

When processing the ng-repeat directive, each repetition can access the current repeated object:

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

Try It Yourself

Each <li> Elements can access the current repeated object, which is a string in this example, by using x to refer to.

root scope

Every application has $rootScope, which is contained in ng-app The scope created on the HTML element of the directive.

The rootScope is available throughout the entire application.

If a variable has the same name in the current scope and the root scope (rootScope), the application will use the variable in the current scope.

Instance

The scope and rootScope of the controller both contain a variable named "color":

<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";
});
</script>
</body>

Try It Yourself