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

Question

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;

 }

use, `$stateParams` instead of `toParams` – Sravan Oct 20 '16 at 07:00 — Sravan, Oct 20 '16 at 07:00
can you give me a sample, I don't have any idea about that. – 3gwebtrain Oct 20 '16 at 07:01 — 3gwebtrain, Oct 20 '16 at 07:01

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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

Hi Radim, I am trying usiing `templateProvider` with parameter, But it seem not working. `$state.go('serialCreateCase', {sn:toParams.sn}); //not works` — 3gwebtrain, Oct 20 '16 at 07:15
I created a plunker and extend the answer.. hope it will help a bit ;) — Radim Köhler, Oct 20 '16 at 08:20

Sravan · Answer 2 · 2016-10-20T07:14:08.057

1

use, $stateParams instead of toParams,

1) Deciding the template depending on the param(your requirement)

.state('serialCreateCase', {
        url: '/serialCreateCase?sn=',
        views: {
            '': {
                templateUrl: function(stateParams) {
                    var param = stateParams.sn
                    return (param == undefined) ? 'app/login/loginWithSerial.html' : 'app/login/login.html'
                },
                controller: 'myController',
            }
        }
      })

You can check the stateParam using the parameter of templateUrl, and change the templates.

2) change the state depending on the param from controller.

This is a sample controller where you can check the state parameter and use the re directions as your wish.

allControllers.controller('myController', ['$scope','$rootScope','$state','$stateParams',
    function($scope,$rootScope,$state,$stateParams) {
        if(!$rootScope.isUserLoggedIn)
        {
            if($stateParams.sn !== undefined )  
            {
                alert('dont take action', $stateParams.sn );
            }
            else
            {
                alert('You can redirect, no parameter present');    
            }

        }
    }   
}])

edited Oct 20 '16 at 07:14

answered Oct 20 '16 at 07:05

Sravan

18,467
3
30
54

Where do you deciding the template here? – 3gwebtrain Oct 20 '16 at 07:07
@3gwebtrain, I have given a sample how to use the state params. if you tell me the exact requirement, I will modify the answer. – Sravan Oct 20 '16 at 07:07
I would like to use 2 templates according to the requirement – 3gwebtrain Oct 20 '16 at 07:08
Updated my answer, please check now. – Sravan Oct 20 '16 at 07:14
when I use to like this; `$state.go('serialCreateCase', {sn:toParams.sn}); //not works` - not working what is wrong here? – 3gwebtrain Oct 20 '16 at 07:16
as I told you, dont use `toParams`, use `$stateParams` – Sravan Oct 20 '16 at 07:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126186/discussion-between-3gwebtrain-and-sravan). – 3gwebtrain Oct 20 '16 at 07:19

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

2 Answers2

Templates

TemplateUrl ...

TemplateProvider

EXTEND