Scope in AngularJs
1 What is the Scope? $$cope is an object is responsible for communicating data between controller and view of the application. It will be worked as the form of expression, it mean that in the model will be declared in the right way, the object will pass action scope (function) or the ...
1 What is the Scope?
$$cope is an object is responsible for communicating data between controller and view of the application. It will be worked as the form of expression, it mean that in the model will be declared in the right way, the object will pass action scope (function) or the corresponding data can be transmitted and events through this object .
Scopes provide expressions like the current template engine, for example, to display the name, then we will declare as {{name}} and the controller we simply assign $scope.name = 'something' , the object this will get keys named name assigned to view {{name}}.
$$cope is a bridge between the controller and view
When you add data to the $scope in controller, if the view has declared regularized, it will automatically assign the correct information on the location.
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myapp"> <div ng-controller="MyController"> Input your name: <input type="text" value="" ng-model="username"> <button ng-click='sayHello()'>Submit</button> <hr> {{greeting}} </div> <script> angular.module('myapp', []) .controller('MyController', ['$scope', function($scope) { $scope.sayHello = function() { $scope.greeting = 'Hello, ' + $scope.username + '!'; }; }]); </script> </body> </html>
In this example, I declare an action ng-click ="sayHello()" meant that when click on input, then it will call the function sayHello () which we define in $scope in the controller .
$scope.sayHello = function() { $scope.greeting = 'Hello, ' + $scope.username + '!'; }
This means that we are declaring this is a model with its key is the username , wants to get its data just use $scopeas follows $scope.username, and want to assign, then we use the syntax $scope.username = value
2 Limit and affection of $$scope
In an AngularJS application, we can have multiple controllers, many different $scope. You see examples below:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <style> .show-scope-demo.ng-scope, .show-scope-demo .ng-scope { border: 1px solid red; margin: 3px; } .show-scope-demo .ng-scope .ng-scope{ border:solid 1px blue; } </style> </head> <body ng-app="myapp"> <div class="show-scope-demo"> <div ng-controller="GreetController"> Hello {{name}}! </div> <div ng-controller="ListController"> Hello {{name}}! </div> </div> <script> angular.module("myapp", []) .controller('GreetController', function ($scope){ $scope.name = 'Jack Kane 1'; }) .controller('ListController', function ($scope){ $scope.name = 'Jack Kane 2'; }); </script> </body> </html>
In which the code below is declared first view:
<div ng-controller="GreetController"> Hello {{name}}! </div>
Corresponding controllers declared in view is the JS:
.controller('GreetController', function ($scope){ $scope.name = 'Jack Kane 1'; })
Code below is the code to show second view:
<div ng-controller="ListController"> Hello {{name}}! </div>
Corresponding controllers declared in view is the JS:
.controller('ListController', function ($scope){ $scope.name = 'Jack Kane 2'; });
As we can see the code above we have two view and two values {{name}}, how to recognize that the scope of data transmission? That why we declared ng-controller in outer div to in paragraph js, it will be the way to understand which value {{name}} in the current controller.
3 What is $$ootScope?
Continuing the example in part 2, and now I will change a little bit of code AngularJS syntax is as follows:
<script> angular.module("myapp", []) .controller('GreetController', function ($scope, $rootScope){ $rootScope.name = 'Jack Kane'; }) .controller('ListController', function ($scope){ }); </script>
In the example this is the main difference in the first Controller JS code with additional parameters $rootScope, and in the second we did not write anything in the Controller.
In code we clearly that we do not transmit the code on the value for $scope both parties view 2 controller but still have? It cause from the variables name we declare in $rootScope. This means that when the application is running, it will have an $rootScope automatically generated, $rootScope is the highest it will cover all $scope sides of it, this does not resemble $scope that only affects the range of the controller.
**4 Nested $$cope **
Now we will add a controller outer cover both controllers as in the above example, the HTML code as follows:
<div class="show-scope-demo"> <div ng-controller="TopController"> <div ng-controller="GreetController"> Hello {{name}}! </div> <div ng-controller="ListController"> Hello {{name}}! </div> {{name}} </div> </div>
And code respone for JS:
angular.module("myapp", []) .controller('TopController', function ($scope){ $scope.name = 'John'; }) .controller('GreetController', function ($scope){ }) .controller('ListController', function ($scope){ });
The second you see in my controller code i do not handle anything and why the view is still getting value? That is due to report its oute controller $scope.name = 'John' so it will get inside.
Now you can fix a little JS code:
angular.module("myapp", []) .controller('TopController', function ($scope){ $scope.name = 'John'; }) .controller('GreetController', function ($scope){ $scope.name = 'Kane'; }) .controller('ListController', function ($scope){ $scope.name = 'Kevin'; });
After we run this code, the first controller will run the previous outer and all {{name}} are getting value as John, but after that controller manually assign value to the value of it should be overwrites the new value {{name}} as shown in controller above.
