Pass value to another controller in angularjs

Question

I am new to AngularJS.

I have a div assigned controller to controller1. In this div, I am showing EmployeeList with three links for View, Edit,Delete for each employee.

I have another div assigned controller to controller2. By clicking the view link on any employee, I want to show full details in second div. Both divs are in same page.

How do I do that? Below is what I tried.

<div ng-controller="employeeController" style="border:solid black 3px;float:left;padding:5px">
        <h3 style="color:#ff6a00">List Of Employees</h3>
        <table>
            <tr>
                <th hidden>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Full Name</th>
                <th>Actions</th>
            </tr>

            <tr ng-repeat="employee in employees">
                <td hidden><strong>{{ employee.ID }}</strong></td>
                <td>{{ employee.FName }}</td>
                <td>{{ employee.LName }}</td>
                <td><strong>{{ employee.FName + ' ' + employee.LName }}</strong></td>
                <td>
                    <a data-ng-click="GetEmployeeByID({{employee.ID}})" href="javascript:;">View</a>
                </td>
            </tr>
        </table>

    </div>

<div ng-controller="employeeByIDController" style="border:solid black 3px;float:right;padding:5px">
        <h3 style="color:#ff6a00">Employee Details</h3>
        <table>
            <tr>
                <th hidden>ID</th>
                <th>Full Name</th>
                <th>Qualification</th>
                <th>Gender</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Address</th>
                <th>City</th>
            </tr>

            <tr>
                <td hidden><strong>{{ employeeByID.ID }}</strong></td>
                <td>{{ employeeByID.FName + ' ' + employeeByID.LName }}</td>
                <td>{{ employeeByID.Qualification }}</td>
                <td>{{ employeeByID.Gender }}</td>
                <td>{{ employeeByID.Phone }}</td>
                <td>{{ employeeByID.Email }}</td>
                <td>{{ employeeByID.Address }}</td>
                <td>{{ employeeByID.City }}</td>

            </tr>
        </table>
    </div>

The code in factory is as below.

mainApp.factory('EmployeeFactory', function ($http) {
return {

    GetEmployeeList: function () {
        return $http({
            method: 'GET',
            url: '/AngularEmployee/EmployeeList'
        });
    }
}

return {

    GetEmployeeByID: function ($id) {
        return $http({
            method: 'GET',
            url: '/AngularEmployee/EmployeeByID',
            params: { empID : id }
        });
    }
}
});

I have added controller as follows.

mainApp.controller("employeeController", ['$scope', 'EmployeeFactory', function ($scope, EmployeeFactory) {


    $scope.GetEmployeeList = function () {
        EmployeeFactory.GetEmployeeList().success(function (data) {
            $scope.employees = data;
        }).error(function (data) {
            $scope.error = "An Error has occured while Loading users! " + data.ExceptionMessage;
        });
    };$scope.GetEmployeeList();

    }]);

you can refer http://stackoverflow.com/questions/27946500/angularjs-pass-params-to-another-controller — user861594, May 24 '16 at 13:28
You can use either service or factory, and watch the changed inside other controller. Look at this answer - [http://stackoverflow.com/a/37399715/296861](http://stackoverflow.com/a/37399715/296861) — Win, May 24 '16 at 14:45

score 0 · Answer 1 · answered May 24 '16 at 13:32

0

Angular has a pubsub mechanism for this. It's well documented. E.g.:

https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

answered May 24 '16 at 13:32

Paul

196
6

Alok Mishra · Answer 2 · 2016-05-24T14:05:05.170

if you want to share data between two controllers in angularJs , using a service or factory is a better option as service/factory in angularJs are injectable.But service/factory is a singleton object so be aware of the fact that same object of the service/factory will be shared by all the controllers. Taking your example , you can create another service :

 mainApp.service('sharedService',function(){
    this.employee={};
    this.getter=function(){
       return this.employee;
    };
    this.setter=function(emp){
      this.employee=emp;
    };
  });

Then you can share this service across your controllers to get or set employee.

 mainApp.controller("employeeController", ['$scope', 'EmployeeFactory', 'sharedService', function($scope, EmployeeFactory, sharedService) {
     $scope.GetEmployeeList = function() {
         EmployeeFactory.GetEmployeeList().success(function(data) {
             $scope.employees = data;
             sharedService.setter($scope.employees);//set in shared service
         }).error(function(data) {
             $scope.error = "An Error has occured while Loading users! " + data.ExceptionMessage;
         });
     };
     $scope.GetEmployeeList();
 }]);

And then in employeeByIDControlle ,

mainApp.controller("employeeByIDController", ['$scope', 'EmployeeFactory', 'sharedService', function($scope, EmployeeFactory, sharedService) {
    $scope.employees = sharedService.getter();//get from shared service
}]);

Pass value to another controller in angularjs

2 Answers2