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

时间:2016-06-09 12:12:48

标签: javascript angularjs angular-ui-router resolve

我有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;
            }
        };

因此,当我进入ambassade路线时,它看不到人体安全注射,反之亦然。我知道我可以为每个州使用两个结果,但这是我为了性能目的而避免的。有人可以帮我弄清楚这个“问题”。

3 个答案:

答案 0 :(得分:1)

你应该看到控制器中的注入是来自更多面向对象语言的接口。

因此,将其命名为entityService,并使其成为您尝试注入的两个服务都有一个可以从控制器调用的同名方法。 (或者在你的情况下'内容'数组)

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

然后在决心中:

entityService: return GestionAmbassadeService.getPersonnelService();

entityService:  return GestionAmbassadeService.getMotAmbassadeurService();

取决于控制器实例。

编辑:在这种情况下,为这两种状态设置相同的控制器似乎不是一个好主意。无论如何,您只能使用两个定义的范围函数之一。因此,拥有单独的控制器会更好。

答案 1 :(得分:1)

谢谢你们。两个答案都解决了问题(我尝试过它们:D)。但我认为第一个更合适,因为在第二个版本中,当我为同一个控制器设置太多页面时,它会比第一个答案慢一点。

但两者仍然有效。谢谢。

编辑:当我说第一个我正在谈论的鲍勃布林克斯回答。它在编辑时会向下移动。

答案 2 :(得分:0)

您应该创建一个顶级抽象状态来解析数据,然后当您在控制器中时,确保加载正确的依赖关系(两者都是)。

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