Call Function, $scope, Model of One Page From/on Second Page in AngularJS

Anubhav Chaudhary
Jul 14, 2015
34.3k
0
2
Article

Introduction

In one of my previous article I explained "How to Call $scope, Model of Child Page on Parent Page in AngularJs". In that article I showed how to use "$parent" to make the scope available at the parent page.

In that article I also explained that their are other ways to call the scope value on other pages. This article will show you one more way of using the scope value on another page and one more thing is included in this article, that is you can also call the function created on another JavaScript page by some other page. This will be done using the $rootScope of AngularJs.

AngularJs provides a very helpful feature that can be used to call $scope values, functions of one page using some other page. This feature helps greatly in those cases where you want to access the $scope value of various pages on one page or vice versa.

Let's create a sample project where I can elaborate upon both of these features.

Step 1

First of all I created a HTML page. In this page I created a div to call the controller. Under this div I used an h1 tag, a button and one more div that will be used to include our child page, so the code is something as in the following:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
<script src="testRootScript.js"></script>
</head>
<body ng-app>
<h3>
I am First Page
</h3>
<hr />
<div ng-controller="TestCtrl">
<h1>{{value}}</h1>
<div ng-include="'test.html'"></div>
<button ng-click="fetch()">Go!!</button>
</div>
</body>
</html>

Step 2

After this I created another page and on this page again I created a div that is used to call another controller, so both pages have their own controllers. In this div a simple Text Box is used whose value will be used in the model and this model will be used in the first page.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="testRootScript.js"></script>
<script src="script.js"></script>
</head>
<body ng-app>
<hr />
<h4>
I am on Second Page
</h4>
<div ng-controller="TestRootCtrl">
<input type="text" placeholder="Enter your name" ng-model="value">
</div>
<hr />
</body>
</html>

Step 3

Now I am working on the Angular part of the first page.

Add a JavaScript page and on that page add the Angular code as in the following code snippet:

var TestCtrl = function ($scope, $rootScope) {
$scope.value = $rootScope.value;
$scope.fetch = function () {
$rootScope.callFunction();
$scope.value = $rootScope.value;
};
};

Here I created the controller with the name "TestCtrl", you can see that along with $scope, $rootScope is also available. $rootScope is the parent of all the scopes. All pages can access the $rootScope value.

Here I have created an object named as value in which the $rootScope value is passed. Also in the next function I had called a function that is also defined using $rootScope. These functions and objects are not on this page but lies somewhere else and still I will be able to use it's value and call the function.

Step 4

Now I am adding one more JavaScript page where the second controller will be defined and all the preceding rootscope values will also exist.

var TestRootCtrl = function ($scope, $rootScope) {
$rootScope.callFunction = function () {
alert("Function Called Successfully");
$rootScope.value = "Anubhav Chaudhary";
};
};

Here I have created the controller with the name "TestRootCtrl", this controller is used on the second page.

Here you can see that I created a function named as "callFunction", this function is defined using rootScope so it can be called from other pages.

Since the function will be called, we will get to understand since an alert message will be shown. We will also see the value of the rootScope object in all those places where we have bound it or passed it in some other scope object.

One major thing to keep in mind and to check is that the path of both of the script pages are passed on both the HTML pages otherwise your rootScope value will not be accessed and an error will be thrown.

<head>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
<script src="testRootScript.js"></script>
</head>

Output

On running the application you will see that the second page is coming along with the first page as it's child, since it was called using the ng-include directive on the first page.

rootScope in AngularJS