Question

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

P.S。我已经尝试过依赖注入部门工厂的员工模块，但由于它不知道该工厂的来源，这是没用的 - 我无法在另一个脚本中引用脚本......

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

工厂可以在不同的模块中使用，但他们不需要被声明为这些模块的依赖关系（就像你正在使用＆＃39; ngRoute＆＃39 ）。

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

.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 as。

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

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

    ...

}]);

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

Angular js：从一个文件到另一个文件的arrray

1 个答案: