Question

我正在使用ui-router模块并定义了以下状态：

 .state('projects.create', {
            url: '/create',
            views: {
                'outer@': {
                    templateUrl: 'views/projects.create.html',
                    resolve: {
                        schoolyear: function(schoolyearService) {
                            return schoolyearService.createSchoolyear();
                        }
                     },
                    controller: 'ProjectWizardController'
                }
            }
        })
        .state('projects.edit', {
            url: '/edit',
            views: {
                'outer@': {
                    templateUrl: 'views/projects.edit.html',
                    resolve: {
                        schoolyear: function(schoolyearService) {
                            return schoolyearService.editSchoolyear();
                        }
                    },
                    controller: 'ProjectWizardController'
                }
            }
        })

由于每个ui-router状态都知道它们是哪个状态，因此它们也知道应该将哪些依赖项传递给ProjectWizardController。

当projects.create状态被激活时，我想将CreateWizardDataService传递给ProjectWizardController。当projects.edit状态被激活时，我想将EditWizardDataService传递给ProjectWizardController。

我如何手动将服务依赖项注入ProjectsWizardController？

'use strict';
angular.module('schoolyearProjectModule').controller('ProjectWizardController',
    function ($scope, wizardDataService, $state, schoolyear) {

// wizardDataService =＆gt;可以是CreateWizardDataService或EditWizardDataService

    // The wizardDataService is the individual service for an AddService or EditService
    // service contain the 3 same main properties: schoolyearData, schoolclasscodesData, timetableData

        wizardDataService.schoolyearData = schoolyear.schoolyearData;
        wizardDataService.schoolyearData = schoolyear.schoolclassCodesData;
        wizardDataService.schoolyearData = schoolyear.timetableData;

        // The if and else if should be injected into this Controller becaue the outside ui router states know their state edit/create
        if ($state.current.name === 'projects.create') {
            $scope.steps = [wizardDataService.schoolyearData, wizardDataService.schoolclassCodesData, wizardDataService.timetableData];
        }
        else if ($state.current.name === 'projects.edit') {
            $scope.steps = [wizardDataService.schoolyearData, wizardDataService.schoolclassCodesData, wizardDataService.timetableData];
        }

        $scope.steps = [wizardDataService.schoolyearData, wizardDataService.schoolclassCodesData, wizardDataService.timetableData];

        $scope.activeStep = $scope.steps[0];
        $scope.step = 0;
        var stepsLength = $scope.steps.length;

        $scope.isLastStep = function () {
            return $scope.step === (stepsLength - 1);
        };
        $scope.isFirstStep = function () {
            return $scope.step === 0;
        };
        $scope.getCurrentStep = function () {
            return $scope.activeStep.name;
        };
        $scope.getNextLabel = function () {
            return ($scope.isLastStep()) ? 'Submit' : 'Next';
        };
        $scope.previous = function () {
            if ($scope.step > 0) {
                $scope.step--;
                $scope.activeStep = $scope.steps[$scope.step];
            }
        };
        $scope.next = function () {

            if ($scope.isLastStep() && $scope.activeStep.isValid()) {
                $state.go('^');
            }
            else if ($scope.activeStep.isValid()) {
                $scope.step += 1;
                $scope.activeStep = $scope.steps[$scope.step];
            }
        }
    });

Answer 1

您有两种方法可以做到这一点：

选项1 - 使用带字符串的resolve作为值。根据文件：

resolve属性是一个地图对象。地图对象包含   键/值对：

key - {string}：要注入的依赖项的名称   控制器。

factory - {string | function}：如果是string，那么它是一个   服务的别名。否则如果是函数，那么它是注入的   返回值被视为依赖项。如果结果是   承诺，它是在控制器实例化之前解决的   值被注入控制器。

选项1示例：

.state('projects.create', {
        url: '/create',
        views: {
            'outer@': {
                templateUrl: 'views/projects.create.html',
                resolve: {
                    schoolyear: function(schoolyearService) {
                        return schoolyearService.createSchoolyear();
                    },
                    wizardDataService: 'CreateWizardDataService'
                 },
                controller: 'ProjectWizardController'
            }
        }
    })
    .state('projects.edit', {
        url: '/edit',
        views: {
            'outer@': {
                templateUrl: 'views/projects.edit.html',
                resolve: {
                    schoolyear: function(schoolyearService) {
                        return schoolyearService.editSchoolyear();
                    },
                    wizardDataService: 'EditWizardDataService'
                },
                controller: 'ProjectWizardController'
            }
        }
    })

选项2 - 根据您所处的状态，直接在控制器中使用$injector.get('CreateWizardDataService')或$injector.get('EditWizardDataService')。

如何通过某些条件动态地将服务传递给控制器

1 个答案: