MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Self Or This Variable In A Controller


When using "controller as syntax" you would give your controller an alias in the html when using the ng-controller directive.

<div ng-controller="MainCtrl as main">
</div>


You can then access properties and methods from the main variable that represents our controller instance. For example, let's access the greeting property of our controller and display it on the screen:

<div ng-controller="MainCtrl as main">
 {{ main.greeting }}
</div>


Now, in our controller, we need to set a value to the greeting property of our controller instance (as opposed to $scope or something else):

angular

.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
 var self = this;
 self.greeting = "Hello World";
})


In order to have the HTML display correctly we needed to set the greeting property on this inside of our controller body. I am creating an intermediate variable named self that holds a reference to this. Why? Consider this code:

angular

.module('ngNjOrg')
.controller('ForgotPasswordController',function ($log) {
 var self = this;
 self.greeting = "Hello World";
 function itsLate () {
 this.greeting = "Goodnight"; 
 }
})


In this above code you may expect the text on the screen to update when the method itsLate is called, but in fact it does not. JavaScript uses function level scoping rules so the "this" inside of itsLate refers to something different that "this" outside of the method body. However, we can get the desired result if we use the self variable:

angular

.module('ngNjOrg')
GoalKicker.com – AngularJS Notes for Professionals 71
.controller('ForgotPasswordController',function ($log) {
 var self = this;
 self.greeting = "Hello World";
 function itsLate () {
 self.greeting = "Goodnight"; 
 }
})


This is the beauty of using a "self" variable in your controllers- you can access this anywhere in your controller and can always be sure that it is referencing your controller instance.


Conclusion

In this page (written and validated by ) you learned about AngularJS Self Or This Variable In A Controller . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Services.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.