多个视图，多个解析，但对于 AngularJS 中的一个控制器答案

【问题标题】：Multiple views, multiple resolve but for one controller in AngularJS多个视图，多个解析，但对于 AngularJS 中的一个控制器
【发布时间】：2016-10-10 02:10:17
【问题描述】：

我有 2 个视图共享同一个控制器。在每个视图中，我使用 resolve 在显示之前检索某个日期。然后我将它注入我的控制器（所以我为每个视图注入两个依赖项）。

但问题是当我从一个视图转到另一个视图时，控制台会显示错误，因为它看不到来自另一个视图的依赖关系。这是我的路由配置

 .state('ambassade', {
                url: '/mot_ambassadeur',
                views: {
                    "@": {
                        templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html",
                        controller: "GestionAmbassadeController",
                        resolve: {
                            informationsAmbassade: function(GestionAmbassadeService) {
                                return GestionAmbassadeService.getMotAmbassadeurService();
                            }
                        }
                    }
                }
            })
            .state('personnel', {
                url: '/personnel',
                views: {
                    "@": {
                        templateUrl: "pages/GestionAmbassade/personnel.html",
                        controller: "GestionAmbassadeController",
                        resolve: {
                            personnelAmbassade: function(GestionAmbassadeService) {
                                return GestionAmbassadeService.getPersonnelService();
                            }
                        }
                    }
                }
            })

这是我的控制器，2次注射是信息大使和人员大使：

 .controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce,
                                                        informationsAmbassade,
                                                        personnelAmbassade) {

        $scope.getMotAmbassadeur = function () {
            if (localStorage.getItem("lang") == "fr") {
                $scope.motAmbassadeur = $sce.trustAsHtml(informationsAmbassade.contents[0].translation.fr_fr.contenu);
                $scope.load = true;
            }
            $scope.photoAmbassadeur = informationsAmbassade.contents[0].content.path;

        };

        $scope.getPersonnel = function () {
            $scope.Personnels = [];
            if (localStorage.getItem("lang") == "fr") {
                for (var i = 0; i < personnelAmbassade.contents.length; i++) {
                    //if ( angular.isDefined(res.contents[i].type) && res.contents[i].type.nom == 'personnel' )
                    $scope.Personnels.push({
                        nom: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.contenu),
                        poste: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.titre)
                    });
                }
                $scope.load = true;
            }
        };

所以当我去大使路线时，它看不到personnalAmbassade 注入，反之亦然。我知道我可以为每个状态使用两个解析，但这是我出于性能目的而避免的。有人可以帮我弄清楚这个“问题”。

【问题讨论】：

标签： javascript angularjs angular-ui-router resolve

【解决方案1】：

谢谢你们。两个答案都解决了问题（我试过了：D）。但我认为第一个更合适，因为在第二个中，当我为同一个控制器有太多页面时，它会比第一个答案慢一点。

但两者仍然有效。谢谢。

编辑：当我说第一个时，我正在谈论 Bob Brinks 回答。当他编辑它时它会向下移动。

【讨论】：

【解决方案2】：

您应该将控制器中的注入视为来自更多面向对象语言的接口。

因此，将其命名为 entityService 之类的名称，并使您尝试注入的两个服务都具有可以从控制器调用的同名方法。（或者在你的情况下是“内容”数组）

.controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce,entityService) {

然后在解析中放置：

entityService: return GestionAmbassadeService.getPersonnelService();

或

entityService:  return GestionAmbassadeService.getMotAmbassadeurService();

取决于控制器实例。

编辑：在这种情况下，为两种状态使用相同的控制器似乎不是一个好主意。无论如何，您将只能使用两个定义的范围函数之一。所以最好有单独的控制器。

【讨论】：

是的，我考虑过，但是当我有太多页面时，这不是问题吗？控制器太多会不会有点沉重
除了你的回答，我认为在使用这种方法的时候，我们还应该测试一下用户来自哪个状态。
更多的小型控制器应该不那么重，因为一次初始化的东西更少。（所有这些东西在需要时都会被延迟初始化……或者至少应该如此）。当你开始在控制器中测试用户来自哪里时，你绝对应该将它们分开。

【解决方案3】：

您应该创建一个顶级抽象状态来解析您的数据，然后当您在控制器中时，您一定会加载正确的依赖项（两者）。

.state('app', {
    abstract:true,
    template:'<div ui-view></div>',
    resolve:{
        informationsAmbassade: function(GestionAmbassadeService) {
            return GestionAmbassadeService.getMotAmbassadeurService();
        },
        personnelAmbassade: function(GestionAmbassadeService) {
            return GestionAmbassadeService.getPersonnelService();
        }
    }
}
.state('app.ambassade', {
    url: '/mot_ambassadeur',
    views: {
        "@": {
            templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html",
            controller: "GestionAmbassadeController"
            }
        }
    }
})
.state('app.personnel', {
    url: '/personnel',
    views: {
        "@": {
            templateUrl: "pages/GestionAmbassade/personnel.html",
            controller: "GestionAmbassadeController"
        }
    }
})

【讨论】：