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

Question

我有 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个注入是informationsAmbassade和personnelAmbassade :

 .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;
            }
        };

所以当我去 ambassade 路线时，它没有看到 personnalAmbassade 注入，反之亦然。我知道我可以为每个状态使用两个解析，但这是我为了性能目的而避免的。谁能帮我弄清楚这个 "issue".

Answer 1

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

.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"
        }
    }
})

Answer 2

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

所以将它命名为类似 entityService 的名称，这样您尝试注入的两个服务都有一个可以从控制器调用的同名方法。（或者在你的情况下 'contents' 数组）

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

然后在解析中输入：

entityService: return GestionAmbassadeService.getPersonnelService();

或

entityService:  return GestionAmbassadeService.getMotAmbassadeurService();

取决于控制器实例。

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

Answer 3

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

但两者仍然有效。谢谢。

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

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

Multiple views, multiple resolve but for one controller in AngularJS

javascript

angularjs

angular-ui-router

resolve