代码之家 › 专栏 › 技术社区 › Elisabeth

如何在某些条件下将服务动态传递给控制器

angular-ui-router angularjs

0

Elisabeth · 技术社区 · 11 年前

我正在使用ui路由器模块,并定义了这些状态:

 .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路由器状态中的每一个都知道它们是什么状态,因此它们也知道应该向ProjectWizardController传递哪些依赖项。

当projects.create状态被激活时,我希望将CreateWizardDataService传递给ProjectWizardController。激活projects.edit状态后,我希望将EditWizardDataService传递给ProjectWizardController。

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

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

//wizardDataService=>可以是CreateWizardDataService或EditWizardDataSeervice

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

1 回复 | 直到 11 年前

1

0

Beyers 11 年前

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

选项1-使用字符串作为值的解析。根据文件:

resolve属性是贴图对象。地图对象包含键/值对:

key{string}:要注入到控制器。

工厂-{string|函数}: 如果字符串,则它是服务的别名 。否则,如果函数为,则将其注入返回值被视为依赖项。如果结果是 promise,它在控制器实例化之前被解析值被注入控制器。

选项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') 根据您所处的状态,直接在控制器中。