Angular中stateProvider的resolve调用服务函数及模态转页面问题

首先明确：你完全可以在路由的resolve中访问服务的公共方法，之前的错误是因为两个核心问题：一是fillProperties是visualizationService中的私有函数，外部无法直接访问；二是resolve函数没有正确依赖注入所需的服务和参数。

下面分步骤帮你解决：

1. 先把fillProperties暴露为服务的公共方法 #

原来的fillProperties是服务内部的私有函数，路由和控制器都无法直接调用，所以需要把它改成服务的公共属性：

angular.module('mda')
 .service('visualizationService', ['$rootScope', 'nsjRouting', 'moment', 'toaster', '$q', '$injector', '$filter', function ($rootScope, nsjRouting, moment, toaster, $q, $injector, $filter) {
    // 将私有函数改为服务的公共方法
    this.fillProperties = function (specialEntity, $scope) {
        // 保留你原来的important stuff代码
    };
 }])

2. 根据fillProperties是否依赖Scope，选择两种实现方案 #

方案A：如果fillProperties不需要依赖控制器的Scope #

这种情况下可以直接在路由的resolve中完成实体填充，步骤如下：

修改路由配置，正确注入visualizationService和$stateParams（用来获取路由中的参数，替代原来模态框传入的solicitation）：

angular.module('mda')
 .config(['$stateProvider', 'nsjRoutingProvider', function ($stateProvider, nsjRoutingProvider) {
 $stateProvider
 .state('meurh_solicitacoes_show', {
 url: "/visualizations/:visualizationId", // 调整url参数格式，更清晰规范
 resolve: {
 entity: ['$stateParams', 'visualizationService', function ($stateParams, visualizationService) {
     // 这里根据路由参数获取对应的solicitation数据
     // 示例：如果需要从后台获取完整实体，可以注入entityService调用接口
     // var solicitation = entityService.get($stateParams.visualizationId);
     // 或者如果参数本身就是实体的简化数据，直接用$stateParams的内容
     var solicitation = angular.copy($stateParams.visualizationId); // 替换成实际的获取逻辑
     var entity = angular.copy(solicitation);
     // 调用服务的公共方法填充属性
     return visualizationService.fillProperties(entity);
 }]
 },
 template: require('html-loader!./show.html'),
 controller: 'visualizationFormShowController',
 controllerAs: 'vslztns_frm_shw_cntrllr',
 })
 }]);

方案B：如果fillProperties必须依赖控制器的Scope #

因为路由resolve阶段控制器还未初始化，$scope还不存在，所以这部分逻辑需要移到控制器中执行：

第一步：路由resolve仅获取并拷贝实体

angular.module('mda')
 .config(['$stateProvider', 'nsjRoutingProvider', function ($stateProvider, nsjRoutingProvider) {
 $stateProvider
 .state('meurh_solicitacoes_show', {
 url: "/visualizations/:visualizationId",
 resolve: {
 entity: ['$stateParams', function ($stateParams) {
     var solicitation = {}; // 替换成实际获取solicitation的逻辑
     return angular.copy(solicitation);
 }]
 },
 template: require('html-loader!./show.html'),
 controller: 'visualizationFormShowController',
 controllerAs: 'vslztns_frm_shw_cntrllr',
 })
 }]);

第二步：在控制器中调用fillProperties

angular.module('mda')
 .controller('visualizationFormShowController', [ '$scope', '$stateParams', '$state', 'entity', 'toaster', '$injector', 'visualizationService', function ( $scope, $stateParams, $state, entity, toaster, $injector, visualizationService) {
     // 调用服务的fillProperties方法，传入实体和当前控制器的Scope
     visualizationService.fillProperties(entity, $scope);
     // 保留你原来的LOTS OF CODE
 }]);

为什么之前的代码会报错？ #

你之前的路由resolve中直接调用fillProperties，但这个函数是visualizationService内部的私有函数，外部无法访问；同时resolve函数没有注入visualizationService，所以JS引擎找不到这个函数，报“未定义”错误。

内容的提问来源于stack exchange，提问作者caio