Question

我是AngularJS的新手。

我为div分配了controller1个控制器。在此div中，我向EmployeeList显示了每个员工的View，Edit，Delete三个链接。

我为div分配了另一个controller2控制器。点击任意员工的view链接，我想在第二个div中显示完整的详细信息。两个div都在同一页面中。

我该怎么做？以下是我的尝试。

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

    }]);

Answer 1

Angular有一个pubsub机制。它有很好的记录。 E.g：

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

Answer 2

如果你想在angularJs中的两个控制器之间共享数据，使用服务或工厂是一个更好的选择，因为angularJs中的服务/工厂是可注入的。但是服务/工厂是一个单例对象所以要注意同一个对象的事实服务/工厂将由所有控制器共享。举个例子，你可以创建另一个服务：

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

将值传递给angularjs中的另一个控制器

2 个答案: