Передать значение другому контроллеру в angularjs

Я новичок AngularJS.

У меня есть divназначенный контроллер controller1. В этом divя показываю EmployeeListс тремя ссылками дляView,Edit, Deleteдля каждого сотрудника.

У меня есть другой divназначенный контроллер controller2. Нажав на viewссылку на любого сотрудника, я хочу показать полную информацию во втором div. Оба divs находятся на одной странице.

Как это сделать? Ниже то, что я пытался.

<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>

Код в Фабрике как ниже.

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 }
        });
    }
}
});

Я добавил контроллер следующим образом.

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();

    }]);

2 ответа

  1. если вы хотите совместно использовать данные между 2 регуляторами в angularJs, то используя обслуживание или фабрику более лучший вариант по мере того как обслуживание/фабрика в angularJs injectable.Но service / factory является одноэлементным объектом, поэтому имейте в виду, что один и тот же объект service/factory будет разделен всеми контроллерами.
    Беря ваш пример ,
    можно создать другую службу :

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

    Затем вы можете поделиться этой услугой между контроллерами, чтобы получить или установить сотрудника.

     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();
     }]);
    

    А потом в employeeByIDControlle ,

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