Utilizing Angular's Scope Functionality

Question

Utilizing Angular's Scope Functionality

I am a novice in the world of AngularJS.

Currently, I am delving into the expert's codebase and looking to customize the directives for educational purposes.

Interestingly, the expert consistently includes:

this.scope = $scope;

at the start of each controller. I'm curious about the purpose of this statement since only $scope is used throughout the code afterwards.

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

this reference was pointing towards $scope rather than the controller itself.

this

When the constructor function of the controller is invoked, this refers to the controller.
When a function defined within a $scope object is called, this represents the "scope in effect at the time when
the function was executed". It may or may not be the same as the $scope the function is defined on. **Therefore, inside the function, this and $scope can differ.

$scope

Each controller has an assigned $scope object.
A controller (constructor) function is tasked with defining model properties and functions/behavior on its corresponding $scope.
Only methods declared on this $scope object (and potentially on parent scope objects through prototypical inheritance) are accessible from the HTML/view. For instance, via ng-click, filters, etc.

courtesy of Mark Rajcok extracted from How does 'this' and $scope work in AngularJS controllers

without using this

app.controller('MyCtrl', function($scope){
  $scope.doStuff = function(){
    //A very lengthy function body
  };
});

with using this

var MyCtrl = function($scope){
  var _this = this;

  $scope.doStuff = function(){
    _this.doStuff();
  };
};

MyCtrl.prototype.doStuff = function(){
  //A very lengthy function body
};

MyCtrl.$inject = ['$scope'];

app.controller('MyCtrl', MyCtrl);

Answer 2

this reference was pointing towards $scope rather than the controller itself.

this

When the constructor function of the controller is invoked, this refers to the controller.
When a function defined within a $scope object is called, this represents the "scope in effect at the time when
the function was executed". It may or may not be the same as the $scope the function is defined on. **Therefore, inside the function, this and $scope can differ.

$scope

Each controller has an assigned $scope object.
A controller (constructor) function is tasked with defining model properties and functions/behavior on its corresponding $scope.
Only methods declared on this $scope object (and potentially on parent scope objects through prototypical inheritance) are accessible from the HTML/view. For instance, via ng-click, filters, etc.

courtesy of Mark Rajcok extracted from How does 'this' and $scope work in AngularJS controllers

without using this

app.controller('MyCtrl', function($scope){
  $scope.doStuff = function(){
    //A very lengthy function body
  };
});

with using this

var MyCtrl = function($scope){
  var _this = this;

  $scope.doStuff = function(){
    _this.doStuff();
  };
};

MyCtrl.prototype.doStuff = function(){
  //A very lengthy function body
};

MyCtrl.$inject = ['$scope'];

app.controller('MyCtrl', MyCtrl);

Utilizing Angular's Scope Functionality

Answer №1

this

$scope

Similar questions

Struggling to generate components using JQuery

What is the most effective way to retrieve the children and ID of an item in the jQuery Nestable plugin following a drag-and-drop action,

Obtaining information from the parent table in SequelizeHow to access data from

Loop through the elements retrieved by the `getElementsByName` method in

Incorporating the power of ES6 into a pre-existing website using React

Using the Count() function in PHP to update information upon page refresh

Forward users to specific date and time on Everwebinar link

The key to successful filtering in Next.js with Hasura is timing - it's always a step

Is Q.js capable of functioning independently from node.js and require()?

NextJS rewrites work seamlessly in a live environment

What is the best way to input an HTML element into AngularJS code?

Integrating an Angular directive to include a cshtml page

Modify Chartjs label color onClick while retaining hover functionality

The 'Required' attribute in HTML is malfunctioning

Ways to manually trigger a reevaluation of Vuelidate validation

The Bootstrap dropdown vanishes before I can even click on it

Console log displays varied outputs for identical arrays

Incorporate a customizable month option within a flexible calendar design

What are some npm web servers that support URL rewriting?

jQuery encountering error when uploading multiple files upon loading