Access the controller scope on another controller

Question

I am new in angular. I want to access the one controller scope on another first I want to know the simple way and available way to do this, advance thanks

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        First Name: <input type="text" ng-model="fName"><br><br>
        Last Name : <input type="text" ng-model="lName">
        <p ng-bind="fullName()"></p>
    </div>
    <div ng-controller="mySecondCtrl">
        Father Name: <input type="text" ng-model="fathName"><br><br>
        Mother Name:<input type="text" ng-model="mothName">
        <p>
        <strong>Paren name:</strong>
        <span>Mr.{{fathName}},</span>
        <span>Ms.{{mothName}}</span>
        </p>
    </div>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);

        app.controller("myCtrl",myFunction);
        function myFunction($scope){
            $scope.fName = "";
            $scope.lName = "";
            $scope.fullName = function(){
                return $scope.fName +" "+ $scope.lName
            }
        }
        app.controller("mySecondCtrl",mySecondFunction);
        function mySecondFunction($scope){
            //I want to access the fullName() function here
        }
    </script>
</body>

use `$braodcast` and `$on` function for relation two controller or use `factory` to share data between controllers — Hadi J, Mar 10 '17 at 08:35
thanks [Matthew Walton](http://stackoverflow.com/users/241544/matthew-walton) — Srikrushna, Mar 10 '17 at 08:36
you should be learning AngularJS 2, what you are doing Google has clearly stated they have found better ways in AngularJS 2 — Brian Ogden, Mar 10 '17 at 08:37
You can also nest controllers. This way child controller can access parent controller scope. Though not recommended — Gopinath Shiva, Mar 10 '17 at 08:39

Nitheesh · Accepted Answer · 2017-03-10T14:10:38.567

You can achieve this purpose by using Angular services for data transfer. You need to set your method in myCtrl, $scope.fullName to a data transfer service.

Now the service holds your method in a variable. Now from your second controller, mySecondCtrl, access the method in the data transfer service.

Now in effect you have called the method in the first controller from the second one. Here is the working example.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<body ng-app="myApp">
    <div ng-controller="myCtrl">
        First Name:
        <input type="text" ng-model="fName">
        <br>
        <br> Last Name :
        <input type="text" ng-model="lName">
        <p ng-bind="fullName()"></p>
    </div>
    <div ng-controller="mySecondCtrl">
        Father Name:
        <input type="text" ng-model="fathName">
        <br>
        <br> Mother Name:
        <input type="text" ng-model="mothName">
        <p>
            <strong>Paren name:</strong>
            <span>Mr.{{fathName}},</span>
            <span>Ms.{{mothName}}</span>
        </p>
        <p><button ng-click="getDetails()">Get Details</button></p>
    </div>

    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.controller("myCtrl", myFunction);

        function myFunction($scope, DataTransfer) {
            $scope.fName = "";
            $scope.lName = "";
            $scope.fullName = function () {
                //console.log('fullname method called');
                return $scope.fName + " " + $scope.lName
            }
            //Setting the method to a data transfer service
            DataTransfer.setUserDetails($scope.fullName);
        }



        app.controller("mySecondCtrl", mySecondFunction);

        function mySecondFunction($scope, DataTransfer) {
            //I want to access the fullName() function here
            $scope.getDetails = function () {
                console.log('Going to call fullname method from second controller');
                //Reading the method in first controller inside the second one
                var functionItem = DataTransfer.getUserDetails();
                var details = functionItem();
                console.log(details);
            }
        }

        app.factory('DataTransfer', function () {

            var data = {};

            return {
                getUserDetails: function () {
                    return data;
                },
                setUserDetails: function (UserDetails) {
                    data = UserDetails;
                }
            };
        });
    </script>
</body>

</html>

Modifications

Here the method is received in a variable in the second controller(functionItem) and that method is called and response data is saved in a variable(details). Now the variable details holds the user details which was taken from first controller.

How I get the full name on second ??? – Srikrushna Mar 10 '17 at 11:51 — Srikrushna, Mar 10 '17 at 11:51
@SrikrushnaPal I have updated the answer. – Nitheesh Mar 10 '17 at 14:10 — Nitheesh, Mar 10 '17 at 14:10

Access the controller scope on another controller

1 Answers1

Linked