Dynamic template Angular UI-Router

Question

I'm trying to load a navbar according to the user.

To do this, I need to set a dynamic template, but I can't see my $rootScope

$stateProvider
    /*Login*/
    .state('login', {
        url: '/',
        data: {pageTitle: 'Inicio de sesión.'},
        resolve: {},
        views: {
            'navbar': {
                templateUrl: null,
                controller: null
            },
            'body': {
                templateUrl: "views/login.html",
                controller: 'LoginController'
            }
        }
    })
    .state('home', {
        url: '/home',
        data: {pageTitle: 'Home.'},
        views: {
            'navbar': {
                templateUrl: "views/navbar.html", //here dynamic template
                controller: null
            },
            'body': {
                templateUrl: "views/inicio.html",
                controller: null
            }
        }
    })
    .state('perfil', {
        url: '/perfil',
        data: {pageTitle: 'Perfil de usuario.'},
        views: {
            'navbar': {
                templateUrl: function (sessionProvider) {
                    var sessionFactory = sessionProvider.path();
                    return sessionFactory;
                }, // this return a tring, but don't load anything
                controller: null
            },
            'body': {
                templateUrl: "views/usuario/perfil.html",
                controller: 'UsuarioController'
            }
        }
    });

i've tried use a service to load the data, but it didnt work, also tried to load it from the localStorageService, but don't display anything.

is there a single way to load it ?

Did you tried ng-include?

Anuraj
– Anuraj

2016-06-01 06:31:32 +00:00
Commented Jun 1, 2016 at 6:31 — Anuraj
– Anuraj, Commented Jun 1, 2016 at 6:31

Community · Accepted Answer · 2017-05-23 12:31:33Z

1

There are features for this, like templateUrl and templateProvider. See all details here:

Trying to Dynamically set a templateUrl in controller based on constant

E.g. this could be an example of templateProvider used isntead of the 'templateUrl' static path

templateProvider: function(CONFIG, $templateRequest) {
    console.log('in templateUrl ' + CONFIG.codeCampType);

    var templateName = 'index5templateB.html';

    if (CONFIG.codeCampType === "svcc") {
         templateName = 'index5templateA.html';
    } 

    return $templateRequest(templateName);
},

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 1, 2016 at 6:32

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paulo Galdo Sandoval Over a year ago

Thank you so much, this is exactly what i was looking!

Radim Köhler Over a year ago

Great to see that, Enjoy mighty UI-Router ;)

Collectives™ on Stack Overflow

Dynamic template Angular UI-Router

1 Answer 1

Trying to Dynamically set a templateUrl in controller based on constant

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related