$scopes in AngularJs

The two-way binding, angular’s key point is indeed implemented through $scope variables. $scope variables when called in DOM, bind the data received from model and also reflect the changes done on the view back to the model! That’s what two-way  data binding is!  Expressions written in {{expression}} are even hence, modifiable that’s is there value changes when there is change in model through controller or view.

The only difference with $rootScope being that $rootScope variables are accessible via all the controllers. And $scope variables are infact child of $rootScope. And before it becomes too much to digest, let’s take a look at the code, it explanation and simple diagram following it to make it crystal clear to you!

CODE:

 

<div ng-controller="MyController">
  Your name:
    <input type="text" ng-model="name">
    <button ng-click='printYourName()'></button>
  
  {{nameVar}}
</div>

angular.module('scopeExample', [])

.controller('MyController', ['$scope', function($scope)

{

     $scope.name= "";

     $scope.printYourName= function()

     {
$scope
.nameVar=$scope.name;

     };

}

]);

Here, the value will be binded to the ng-model: name here that is whenever their is update in the value, ‘name’ model automatically takes in the updated value. And that value change can be used through {{nameVar}} in the front-end where DOM would reflect back all the changes associated.

DIAGRAM:

Hope, it would have made you clear with the  concept. If you still have an any doubt, leave it in the comment section below. Our team would revert back within 24 hours.

Do Follow our Facebook page https://www.facebook.com/lovebeingengineer/.

Similar Blogs:

Top 10 AngularJs Interview Questions

 

Forms in AngularJs

 

Templates And Expressions in AngularJs

 

Services in AngularJs

 

Controllers in AngularJs

Understanding Two-Way Data Binding in AngularJs

 

Journey of Angular

 

Dependency Injection in AngularJs!

 

 

Leave a Reply