javascript - Angular js : an arrray from one file to another

Question

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

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

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

这是员工.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 中注入(inject)部门服务。

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

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

.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']

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

执行此操作的另一种方法是将 Controller 函数包装在方括号中(有效地声明一个数组)，并将您的服务作为该数组中的字符串列出:

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

    ...

}]); 

在这两种情况下，您都可以在 Controller 内使用两个工厂的每种方法。