August 15, 2020

$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:

 

 

 

 

 

 

 

 

admin

Engineer Diaries started with the need to bridge the huge gap in what we are taught vs what the industry demands. We are based in Delhi, India but our blog is for everyone, in and outside tech industry❤ Feel free to reach out to us at engineerdiaries@gmail.com for any business/personal query.

View all posts by admin →

Leave a Reply