CODEWITHSUNDEEP
javascriptangularjsangular-ui-routeruser-experienceangular-translate
Mohammad Hani
Mohammad Hani

Reputation: 218

Apply condition on templateUrl in config while routing

I'm using ui-router and developed a multi-lingual website using angular-translate but currently I'm stuck where I want such scenario:

  1. There will be 2 template for a single page one will be normal version which is would be English and working as normal site and second template would be consisting of translate="" attribute, in other words fully translated page. But I'm willing if I could have conditions while routing so this would resolve my issue. Looking at code could make it easier for you to understand.

Currently my code looks like:

.state('whoweAre', {
            url: '/about-us',
            templateUrl: 'templates/whoweAre/whoweAre.html', 
            controller: 'whoweAreCtrl'
        }
    )

but now currently I'm want something like

    .state('whoweAre', {
            url: '/about-us',
            templateUrl: function(isTranslated){
             if(isTranslated){
              return "templates/translated/whoweAre/whoweAre.html";
             }
             else{
               return "templates/whoweAre/whoweAre.html";
             }
            }, 
            controller: 'whoweAreCtrl'
        }
    )

but this doesn't seems to be working and I have this isTranslated variable in app.js and I can't access it in config (routes.js) file for me. Any work around related to this would be great. I'm using this because when user arrives for a first time angular translate text seems to be empty and tags appears with empty tags which is leading towards bad UX. Any help would be appreciated. Thanks !

Upvotes: 0

Views: 494

Answers (2)

Mohammad Hani
Mohammad Hani

Reputation: 218

After more research I found this way useful. Thanks folks for all your help. 

templateProvider:
  function(AppService) {
    if(AppService.getLocal("language").locale != 'en' )
    return "translated template url";
    else
    return "normal page"
  }

Upvotes: 0

Ankur Rathi
Ankur Rathi

Reputation: 109

You can find current state and set the template dynamically in app.js

In your app.js check the state 

 $rootScope.$on('$stateChangeStart', function(event, next) {

                if(next.name=="whoweAre" && isTranslated)
                {
                  next.templateUrl="templates/translated/whoweAre/whoweAre.html";
                }
                else if(next.name=="whoweAre" && !isTranslated)
               {
                  next.templateUrl="templates/whoweAre/whoweAre.html";
               }

Upvotes: 1

Related Questions