Angular controller's attribute not accessible outside its function

Question

I have a form with two input fields (session.email and session.psw) bound to the LoginController.session attribute. When I click the reset button, I call the LoginController.reset() function.

I would like make it clear the session attribute, utilizing the variable sessionDefault (empty). However it works just one time, if I reset two times the form, sessionDefault is undefined.

How could I make it as a constant attribute of the controller?

  app.controller('LoginController', function ($scope)
        {
         this.session={};
         var sessionDefault=
              {
                  email : "",
                  psw: ""
              };    

         this.reset = function()
                {  this.session = sessionDefault;  };                       
        });

it is not an answer, it doesn't work. It is just my not-working code — DeLac
– DeLac, Commented Apr 16, 2015 at 13:29

Nidhish Krishnan · Accepted Answer · 2015-04-16 13:50:02Z

2

Try out this out

for reset function just reset it with sessionDefault copy like as shown below

vm.reset = function () {
    vm.session = angular.copy(sessionDefault);
};

here this refers to the controller instance

Notice that I use var vm = this; and then I decorate vm with the members that should be exposed and data-bindable to to the View. vm simply denotes view modal

This does 3 things for me.

Provides a consistent and readable method of creating bindings in my controllers
Removes any issues of dealing with this scoping or binding (i.e. closures in nested functions)
Removes $scope from the controller unless I explicitly need it for something else

Working Demo

script

   var app = angular.module('myApp', []);
   app.controller('LoginController', function ($scope) {
     var vm = this;
     vm.session = {};
     var sessionDefault = {
        email: "",
        psw: ""
     };
     vm.reset = function () {
         vm.session = angular.copy(sessionDefault);
     };
});

html

<div ng-app='myApp' ng-controller="LoginController as login">
    Email:<input type="text" ng-model="login.session.email"/>{{login.session.email}}
    <br>
    Psw:<input type="text" ng-model="login.session.psw"/>{{login.session.psw}}
    <br>
    <button ng-click="login.reset()">Reset</button>
</div>

Take a look at this beautiful stuff.

AngularJS’s Controller As and the vm Variable

edited Apr 16, 2015 at 13:50

answered Apr 16, 2015 at 12:21

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DeLac Over a year ago

this code works as mine, it resets just one time. At the second resent, it doesn't work anymore

Nidhish Krishnan Over a year ago

@DeLac I have updated my answer, check that working demo

DeLac Over a year ago

now it works! great... thank you. So I need vm.session = angular.copy(sessionDefault) instead of vm.session = sessionDefault I wonder to know why.. I didn't know this function.

Nidhish Krishnan Over a year ago

@DeLac angular.copy is a kind of deep copy feature provided by angularjs

Jonathan · Accepted Answer · 2015-04-16 13:54:10Z

0

this.reset = function()
                {  this.session = sessionDefault;  };

The this in this context refers to the function (reset). If you want to access the 'original' this you need to store it in a variable.

 app.controller('LoginController', function ($scope)
        {
         this.session={};
         var sessionDefault=
              {
                  email : "",
                  psw: ""
              };    

         var self = this;
         this.reset = function()
                {  self.session = angular.clone( sessionDefault);  };                       
        });

edited Apr 16, 2015 at 13:54

answered Apr 16, 2015 at 12:21

Jonathan

3,6543 gold badges23 silver badges30 bronze badges

2 Comments

DeLac Over a year ago

it makes sense. however, as other solutions, it works just one time. I can't figure out why..

DeLac Over a year ago

according to @Nidhish, it seems that angular.copy(sessionDefault) is needed

Collectives™ on Stack Overflow

Angular controller's attribute not accessible outside its function

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related