How the controller in angular is called?

Question

I want to bind the full name = firstname + lastname.

I have seen this example in the w3 schools. But i am unable to understand it.

My question is how the function got called? It have any listeners?

Could someone please, shed some light on it, in detailed way. Sorry I am newbie..

My code is:

 var application = angular.module('myTempApp', []);
        application.controller('myController', function ($scope) {
            $scope.myFirstName = "xxx";
            $scope.myLastName = "yyy";
            $scope.myFunction = function () {
                alert('called');
                $scope.myFullName = $scope.myFirstName + $scope.myLastName;
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
    <div ng-app="myTempApp" ng-controller="myController">
        <input type="text" ng-model="myFirstName" />
        <input type="text" ng-model="myLastName" />
        <input type="text" ng-model="myFullName" ng-bind="myFullName" />
        <br />
        {{ myFunction() }}
      <br/>
         data ::: {{2+2}}
    </div>
</body>

Thanks in advance.

angulars page is pretty informative. w3 school on the other hand .. well. Maybe this helps: docs.angularjs.org/guide/databinding — nilsK
– nilsK, Commented Jun 11, 2015 at 10:44
you need to really read this docs.angularjs.org/guide/controller — Pankaj Parkar
– Pankaj Parkar, Commented Jun 11, 2015 at 10:45
Avoid w3schools like the plague. When you have genuine documentation on angular's website, why do you need to look elsewhere? — Abhishek Jain
– Abhishek Jain, Commented Jun 11, 2015 at 11:13

Vineet 'DEVIN' Dev · Accepted Answer · 2015-06-11 13:29:18Z

2

lets go step by step.

You are binding three literals and one function type variable. Whenever you write any variable (of any data type), it gets registered in the digest cycle of angularJS. So, firstName, lastName, fullName and myFunction gets registered in digest cycle. And every variable in digest cycle has a watcher.

Whenever a variable changes, angularJS checks through all variables registered in digest cycle and prints the latest value of each variable in the view.

so lets assume - if firstName is xxx and last name is yyy and you changed firstName to xx. Now angular will check both firstName and lastName and print the latest value of both of them.

Therefore, whenever you make any change to any scope variable, your binded function inside the angular expression gets called

answered Jun 11, 2015 at 13:29

Vineet 'DEVIN' Dev

1,2231 gold badge11 silver badges37 bronze badges

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

1 Comment

NANDAKUMAR THANGAVELU Over a year ago

This one explained more, which i want. Thanks for the digest info also.

Walter Chapilliquen - wZVanG · Accepted Answer · 2015-06-11 10:48:09Z

If you want to update a variable depending on other could use $watch

var application = angular.module('myTempApp', []);
application.controller('myController', function ($scope) {
  $scope.myFirstName = "xxx";
  $scope.myLastName = "yyy";
    
  $scope.myFunction = function () {
    //alert('called');
    $scope.myFullName = $scope.myFirstName + $scope.myLastName;
  };
  
  $scope.$watch("myFirstName + myLastName", $scope.myFunction);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
    <div ng-app="myTempApp" ng-controller="myController">
        <input type="text" ng-model="myFirstName" />
        <input type="text" ng-model="myLastName" />
        <input type="text" ng-model="myFullName" ng-bind="myFullName" />
        <br />
        {{ myFunction() }}
      <br/>
         data ::: {{2+2}}
    </div>
</body>

Poorav Solanki · Accepted Answer · 2015-06-11 10:50:47Z

0

This might help.

function studentController($scope) {
     $scope.student = {
        firstName: "Mahesh",
        lastName: "Parashar",
        fullName: function() {
           var studentObject;
           studentObject = $scope.student;
          return studentObject.firstName + " " + studentObject.lastName;
        }
     };
}

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

answered Jun 11, 2015 at 10:50

Poorav Solanki

1741 gold badge2 silver badges11 bronze badges

1 Comment

Poorav Solanki Over a year ago

you dont need to call function to get full name. angularjs provide dynamic binding, when you change in to controller it automatically reflecto html.

didando8a · Accepted Answer · 2015-06-11 10:52:11Z

0

There two ways of binding data between the model (html and the controller the data into the $scope, ng-bind and {{ }}. What they do here is call {{ myFunction() }} ((which act like a listener), then every time is taking care of myFirstName and myLastName (so as they change, the new value is going to be save in $scope.myfullName, and render into the model)

answered Jun 11, 2015 at 10:52

didando8a

1281 silver badge7 bronze badges

Collectives™ on Stack Overflow

How the controller in angular is called?

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related