lakhassane lakhassane - 5 months ago 136
Javascript Question

Multiple views, multiple resolve but for one controller in AngularJS

I have 2 views that share the same controller. In each one of this view I used resolve to retrieve some date before displaying it. Then I inject it in my controller (so I inject two dependancy for each view).

But the problem is when I go from a view to another, the console display an error because it doesn't see the dependancy from the other view. This is my route configuration



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





This is my controller, the 2 injections are informationsAmbassade and 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;
}
};





So when I go to ambassade route it doesn't see the personnalAmbassade injection and vice-versa. I know I can use the two resolves for each state but this is what I'm avoiding for performance purpose. Can someone help me figure out this "issue".

Answer

You should create a top abstract state to resolve your datas, then you are sure to load the right dependencies (both of them) when you are in your controller.

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