AngularJS Scope
AngularJS Scope object to pass data between view and controller.Scope is responsible for binding data and view.Scope contain property and method which are controller specific.Controller access model data via Scope object.
Following is a example of AngularJS Scope
Explanation of the above examples
Scope Inheritance
Controllers can be nested.Scope are controllers specific.A child controller can inherit scope of its parent controller.Below is the example of Scope Inheritance.
The above example have two contrller , ParentController and ChildController.Childcontroller is nested under the ParentController.Both the controller uses $scope as parameter.
Both controller modify $scope.msg2 . You will notice , Childcontroller has modified ParentController $scope.msg2.
Root Scope
AngularJS Scope object to pass data between view and controller.Scope is responsible for binding data and view.Scope contain property and method which are controller specific.Controller access model data via Scope object.
Following is a example of AngularJS Scope
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
function
($scope)
{
$scope.Pass
= function
()
{
return
$scope.msg = "Congratulation
!!! You have pass the examination";
};
$scope.Fail
= function
()
{
return
$scope.msg = "Not
Worry !! Try next time.";
};
});
</script>
<div
ng-app="myApp"
ng-controller="myController">
<button
ng-click="Pass()">Pass</button>
<button
ng-click="Fail()">Fail</button><br
/>
Your
Result {{msg}}
</div>
Output :
Explanation of the above examples
- $scope is mandatory to pass as first argument to controller during its constructor definition.
- $scope.Pass and $scope.Fail are method used in the HTML page.
Scope Inheritance
Controllers can be nested.Scope are controllers specific.A child controller can inherit scope of its parent controller.Below is the example of Scope Inheritance.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.controller('ParentController',
function
($scope)
{
$scope.msg1
= "Hi,
I am Learing AngulasJS";
$scope.msg2
= "This
is Parent Controller";
});
app.controller('ChildController',
function
($scope)
{
$scope.msg2
= $scope.msg2 + "
,Hope , you will enjoy";
$scope.msg3
= "This
is Child Controller";
});
</script>
<div
ng-app="myApp"
ng-controller="ParentController">
Parent
Controller ,Message 1 : {{msg1}} <br
/>
Parent
Controller ,Message 2 : {{msg2}}
<div
ng-controller="ChildController">
<br
/>
Child
Controller ,Message 2 : {{msg2}} <br
/>Child
Controller ,Message 3 : {{msg3}}
</div>
</div>
Output :
The above example have two contrller , ParentController and ChildController.Childcontroller is nested under the ParentController.Both the controller uses $scope as parameter.
Both controller modify $scope.msg2 . You will notice , Childcontroller has modified ParentController $scope.msg2.
Root Scope
No comments:
Post a Comment