forum

Home / DeveloperSection / Forums / "this" vs $scope in AngularJS controllers

Ask Question
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

17-Jun-2024

Difference Between ‘This’ and ‘$scope’

Understanding the difference between this and $scope in controllers in AngularJS is important for properly managing data and behavior in your application. Here is a detailed comparison between this and $scope,

$scope

Definition- $scope is an object provided by AngularJS that acts as a reference to the application's data. It acts as a bridge between the controller and the view.

Usage

  • Controllers in traditional AngularJS (pre-AngularJS  1.5) mostly use $scope to expose data and functions in the view.
  • $scope allows you to define automatic properties and functions for corresponding view templates.

Example- 

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>$Scope example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="MyController">
       <!-- bind the data $scope.message -->
        <p data-ng-bind="message"></p>
        <!-- button that call the sayHello() on click events -->
         <button data-ng-click="sayHello()">Click me</button>       
    </div>

    <script>
        angular.module("myApp", [])
        .controller('MyController', function($scope) {
            $scope.message = 'Hello, AngularJS Program!';
            $scope.sayHello = function() {
                alert($scope.message);
            };
        });

    </script>

</body>
</html>

In the example above

$scope.message and $scope.sayHello() are accessible in the corresponding HTML template.

 

Digest Cycle- $scope is an important part of the AngularJS digest cycle, where AngularJS checks for changes to $scope properties and updates the view accordingly.

Inheritance- $scope is a structure in which child managers inherit from their parent scope, and allows data to be shared between components.

 

“this”

Translation: This refers only to the controller instance, not the scope object. This is a basic JavaScript concept used in object-oriented programming.

Usage

  • With the introduction of AngularJS 1.2 and later, using this (controllerAs syntax) as a replacement for $scope became popular.
  • It is used to expose properties and methods directly on the controller instance, making it more like a traditional object-oriented programming exercise

Example- 

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>this Scope Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <!-- provide the alias name of controller -->
    <div data-ng-controller="MyController as myCtrl">
       <!-- bind the data $scope.message -->
        <p data-ng-bind="myCtrl.message"></p>
        <!-- button that call the sayHello() on click events -->
         <button data-ng-click="myCtrl.sayHello()">Click me</button>       
    </div>

    <script>
        angular.module("myApp", [])
        .controller('MyController', function() {
            this.message = 'Hello, AngularJS Program!';
            this.sayHello = function() {
                alert(this.message);
            };
        });

    </script>

</body>
</html>

In the example above

this.message and this.sayHello() are accessible in the associated HTML template when using controllerAs syntax.

 


Choosing between “$scope” and “this”


Legacy vs. Modern Approach

For older AngularJS codebases or smaller applications $scope is perfectly practical and widely used.
For larger applications or other projects, this is often preferred with the controllerAs syntax due to its clarity and compatibility with modern JavaScript practices.
Migration

AngularJS provides ways to gradually move the controllerAs syntax out of the $scope implementation. Tools like ng-controller and ng-bind also support $scope.
consistency

Whichever method you choose, consistency in the business is important. Stick to $scope or this throughout the application to maintain code readability and reduce confusion.

 

Also, Read: Explain the concept of "scope" in AngularJS

MindStick Training

Liked By