3gwebtrain 3gwebtrain - 1 month ago 5
AngularJS Question

How to supply the separate `template` when param exist?

I have a scenario, to handle the params. ( when param exist it will handled differently )

so, how can i keep 2 templates and use them according to the requirement? at present I am trying like this, which is not working at all.

any one help me?

my state with 2 template: ( please help me to correct )

.state('serialCreateCase', {
url: '/serialCreateCase?sn=',
views:{
"" : {
"templateUrl": 'app/login/loginWithSerial.html'
},
"?sn=" : {
"templateUrl": 'app/login/login.html'
}
}
})


here is the redirection with 2 scenarios: ( correct me if I am wrong )

if(!$rootScope.isUserLoggedIn && toParams.sn !== undefined ) {

console.log('dont take action', toState, toParams.sn );
$rootScope.canNavigate = true;
$state.go('serialCreateCase'); //works
$state.go('serialCreateCase', {sn:'1234'}); //not works
event.preventDefault();
return;

}

Answer

There is a working plunker

I would say that you need replace templateUrl with

Templates

TemplateUrl ...

templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.

TemplateProvider

Or you can use a template provider function which can be injected, has access to locals, and must return template HTML, like this...

There are more details and plunkers

This I prefer the most

...
templateProvider: [$stateParams, '$templateRequest',
  function($stateParams, templateRequest) 
  {
    var tplName = "pages/" + $stateParams.type + ".html";
    return templateRequest(tplName);
  }
],

(check it here) because it uses also $templateRequest

EXTEND

There is a working plunker

this could be the state def

  .state('serialCreateCase', {
    url: '/serialCreateCase?sn',
    views: {
      "": {
        templateProvider: ['$stateParams', '$templateRequest',
          function($stateParams, templateRequest) {
            var tplName = "app/login/loginWithSerial.html";
            if($stateParams.sn){
               tplName = "app/login/login.html";
            }
            return templateRequest(tplName);
          }
        ]
      },
    }
  });

what we really need is to always pass some value, as sn. So, these should be the calls:

  // we need to pass some value, to be sure that there will be other than last
  <a ui-sref="serialCreateCase({sn: null})">
  // here is reasonable value
  <a ui-sref="serialCreateCase({sn:'1234'})">

Check it here in action

Comments