-
$this vs $scope in AngularJs
almost 8 years ago
$scope and $this are the mostly used in AngularJs.
But we often caught up in a perplexed situation, which one we should use.
whatever we define in a certain block(or DIV) of HTML, all the variables comes under the $scope or this.
for example,
we have index1.html
<html lang="en"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="MainCtrl.js"></script> </head> <body ng-app="app"> <div ng-controller="mainCtrl as main"> <div> Quantity: <input type="number" ng-model="main.quantity" required > </div> <div> Cost: <input type="number" min="0" ng-model="main.cost" required > </div> <div> <b>Total:</b> {{main.total}} </div> </div> </body> </html>we have our controller MainCtrl.js
var maincontroller = angular.module('app', []); maincontroller.controller('mainCtrl', function() { this.quantity = 8; this.cost = 15; this.total = this.quantity * this.cost; });now we have index2.html
<html lang="en"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="OtherCtrl.js"></script> </head> <body ng-app="app"> <div ng-controller="otherCtrl"> <div> Quantity: <input type="number" ng-model="quantity" required > </div> <div> Cost: <input type="number" min="0" ng-model="cost" required > </div> <div> <b>Total:</b> {{total}} </div> </div> </body> </html>and we have OtherCtrl.js
var othercontroller = angular.module('app', [$scope]); othercontroller.controller('otherCtrl', function($scope) { $scope.quantity = 8; $scope.cost = 15; $scope.total = this.quantity * this.cost; });Here, we can find out the difference as we can see that,
In index1.html we have instance of our controller as main. We can access the variable under this by creating an instance of controller.
But to access variable under $scope isn't that hard. we do not have to create any instance. just define any variable and access in your controller preceded by $scope.
Now we have another scenario.
First we will write some code:
my index.html
<html lang="en"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="controller.js"></script> </head> <body ng-app="app"> <div ng-controller="firstCtrl"> <button ng-click="check()">This & Scope</button> <div ng-controller="secondCtrl"> <button ng-click="check()">This & Scope</button> </div> </div> </body> </html>my controller.js
var checkapp = angular.module('app', []); checkapp.directive('myDirective', function() { function firstCtrl($scope) { $scope.check = function() { console.info(this, $scope) } } function secondCtrl($scope) {} });now lets see some results
here we can see that, if we have nested controller in our view then,
- The value of $scope will remain same throughout.
- While the value of this gets change.
- Because, at first click, the object of this if for firstCtrl .
- while , at the second click, the console shows the object for secondCtrl
In conclusion: The value of $scope remains same throughout the controller. While, the value of this changes when any controller comes into another controller (we are talking about nested controllers.).
0 Comment(s)