Angular js：从一个文件到另一个文件的数组

Question

我是 Angular js 的新手。我已经包含了两个文件，这两个文件分别工作正常 - 我可以向数组添加名称并删除或更新它们，但我的想法是能够从一个文件中获取数组并动态地将其传递给另一个。因为当我切换视图时，数组仍然被存储（直到刷新） 我如何连接这两个 .js 文件，因为这两个模块位于两个单独的文件中，并且这两个视图使两个数组都具有字符串名称。我想要的基本上是从员工模块中调用一个函数（getallDepartments），并从部门模块中获取部门名称数组。而且我知道我不能像 require 或 include 一样使用，但我不需要将数据保存到数据库中，那么这里最好的其他方法是什么？所以我有这个代码：

附言我已经尝试在员工模块中注入部门工厂的依赖项，但由于它不知道该工厂来自哪里，所以这是无用的 - 我无法在另一个脚本中引用该脚本......

employees.js

'use strict';

angular.module('myApp.employees', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/employees', {
    templateUrl: 'employees/employees.html',
    controller: 'View2Ctrl',
    controllerAs:"View2"
  });
}])


.factory('EmployeeService', function()
{
    var employees = [];

return {
    deleteEmployee: function(employee) {
        var index  = employees.indexOf(employee);
        if(index > -1)
        {
            employees.splice(index,1);
        }
    },
    addEmployee: function(employee) {
        employees.push(employee);
    },
    getallEmployee: function()
    {
        return employees;
    },
    getallDepartment: function()
    {
        console.log("fdfs");
        //console.log(DepartmentService.getallDepartments())
        return DepartmentService.getallDepartments();
    },
    updateEmployee: function(employee,newname) {
        var index  = employees.indexOf(employee);
        if(index > -1)
        {
            employees[index] = newname;     
        }
    }
} 
})


.controller('View2Ctrl', function(EmployeeService) {
    var vm = this;
    vm.employees = EmployeeService.getallEmployee();

    vm.addEmployee = function(employee) {
        EmployeeService.addEmployee(employee);
    }

    vm.deleteEmployee = function(employee) {
        EmployeeService.deleteEmployee(employee);
    }

    vm.selectEmployee = function(employee) {
        vm.employeeSelected = true;
        vm.updateEmployeeName = employee;
    }

    vm.updateEmployee = function(employee) {
        EmployeeService.updateEmployee(vm.employee,vm.updateEmployeeName);
    }

    //vm.Check = function()
    //{
    //  EmployeeService.getallDepartment();
    //} 
});





'use strict';

angular.module('myApp.departments', ['ngRoute'])


.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/departments', {
    templateUrl: 'departments/departments.html',
    controller: 'View1Ctrl',
    controllerAs: "View1"

  });
 }])


.factory('DepartmentService', function()
{
    var departments = [];

return {
    deleteDepartment: function(department) {
        var index  = departments.indexOf(department);
        if(index > -1)
        {
            departments.splice(index,1);
        }
    },
    addDepartment: function(department) {
        departments.push(department);
    },
    getallDepartments: function()
    {
        return departments;
    },
    updateDepartment: function(department,newname) {
        var index  = departments.indexOf(department);
        if(index > -1)
        {
            departments[index] = newname;   
        }
    }
} 
})

.controller('View1Ctrl', function(DepartmentService) {
    var vm = this;
    vm.departments = DepartmentService.getallDepartments();

    vm.addDepartment = function(department) {
        DepartmentService.addDepartment(department);
    }

    vm.deleteDepartment = function(department) {
        DepartmentService.deleteDepartment(department);
    }

    vm.selectDepartment = function(department) {
        vm.departmentSelected = true;
        vm.updateDepartmentName = department;
    }

    vm.updateDepartment = function(department) {
        DepartmentService.updateDepartment(vm.department,vm.updateDepartmentName);
    }
});

这是employees.html

<table
<p></p>
<h1>Update</h1>
<input ng-model="View2.updateEmployeeName" ng-disabled="!View2.employeeSelected">
<button ng-click="View2.updateEmployee(View2.employeeSelected)">UpdateEmployee</button>
<hr>
      <table border="1px" style="width: 200px" ng-repeat="employee in View2.employees">
      <tr>
      <td>{{employee}}</td>
      <td><button ng-click="View2.deleteEmployee(employee)">Delete</button></td>
      <td><button ng-click="View2.selectEmployee(employee)">Update</button></td>
      <td><button ng-click="View2.Check()">Check</button></td>
          </tr> 
      </table>
<hr>
<h1>Create</h1>

<input ng-model="View2.employee">
<button ng-click="View2.addEmployee(View2.employee)">AddEmployee</button>

Answer 1

工厂可以在不同的模块中使用，但它们不需要声明为这些模块的依赖项（就像您使用“ngRoute”所做的那样）。

您当前正在部门控制器中注入部门服务。

.controller('View1Ctrl', function(DepartmentService) {

您可以在员工控制器中执行相同操作，然后从部门控制器复制您需要的行：

.controller('View2Ctrl', function(EmployeeService, DepartmentService) {

    var vm = this;
    vm.employees = EmployeeService.getallEmployee();
    vm.departments = DepartmentService.getallDepartments();

    ...

除非它们位于不同的文件中，否则它不会开箱即用。在这种情况下，您需要使用 $inject 提供程序。我建议你重构你的 .controller 声明，将第二个参数变成一个命名函数：

.controller('View2Ctrl', View2Ctrl)

function View2Ctrl(EmployeeService, DepartmentService) {
    ...
}

然后你可以添加这一行（在 View2Ctrl 函数之外，同一文件中的任何位置）：

View2Ctrl.$inject = ['EmployeeService', 'DepartmentService']

在函数参数和定义 View2Ctrl.$inject 的字符串数组中，列出要注入的服务的顺序必须相同。

这样做的另一种方法是将您的控制器函数包装在方括号中（有效地声明一个数组），并将您的服务列为该数组中的字符串：

.controller('View2Ctrl', ['EmployeeService', 'DepartmentService', function(EmployeeService, DepartmentService) {
    var vm = this;
    vm.employees = EmployeeService.getallEmployee();
    vm.departments = DepartmentService.getallDepartments();

    ...

}]); 

在这两种情况下，您都可以在控制器中使用两个工厂的所有方法。