How to change only one ui-view out of many. Without changing state

Question

In my HTML I have three columns where I am rendering 3 different HTML templates.

 <div id="col1" ui-view="col1"></div>
 <div id="col2" ui-view="col2"></div>
 <div id="col3" ui-view="col3"></div>

State demo which will render all this is like following.

$stateProvider
  .state('demo',{
    views: {
      'col1': {
        templateUrl: 'FirstTemplate.html'
      },
      'col2': {
        templateUrl: 'SecondTemplate.html'
      },
      'col3': {
        templateUrl: 'ThirdTemplate.html'
      }
    }
  })

My question is, how can I change templateurl of col3 from ThirdTemplate.html to NewTemplate.html, without changing the state.

check this link: https://scotch.io/tutorials/angular-routing-using-ui-router — Ved, Jan 20 '15 at 04:58
I just did and unfortunately I still don't know how to do it. Would you kindly point it out for me? — Aditya Ponkshe, Jan 20 '15 at 05:05
@Ved I am new to this but as I looked at their example, I think they are changing their states using `ui-sref`. What I want to do is something different, I want to stay in the same state and just change view(templateURL) dynamically. — Aditya Ponkshe, Jan 20 '15 at 05:14
is it ok for you to use ng-show and ng-hide to just change the view.. — Ved, Jan 20 '15 at 05:18
@Ved That is one way, but by doing that I will be loading all my templates at a time when the state is activated and I am going to have a LOT of these templates, That is the reason I am looking for a way to change them dynamically. — Aditya Ponkshe, Jan 20 '15 at 05:22
the link i posted is fine. It will work for you.. check this example.http://embed.plnkr.co/M03tYgtfqNH09U4x5pHC/preview — Ved, Jan 20 '15 at 05:30
@Ved You have created nested states in there, and still changing from state to state to change views. — Aditya Ponkshe, Jan 20 '15 at 05:41
I think, If you wanna change the views without routes don't use views use ng-include. — rigobcastro, Jan 20 '15 at 06:03

score 1 · Accepted Answer · edited May 23 '17 at 11:58

To answer this:

My question is, how can I change templateurl of col3 from ThirdTemplate.html to NewTemplate.html, without changing the state. ?

It is not possible. It is not intended nor supported.

The idea behind the UI-Router is navigation among states (even without using url, $state.go()). Once the state TO is found/resolved, all its setting are converted into implementations (controllerProvider returning controller or string which is used to find controller, templateProvider returning template, etc.)

After that, state is stable and solid. We can use some other angular features (directives) to manipulate the DOM, but unless we will change the state - its parts are fixed.

In case, we can accept state change (including current state reload) we can profit e.g. from Template Provider:

NOTE: state change above means: 1) navigate to other or 2) reload current.

score 0 · Answer 2 · answered Jan 20 '15 at 06:16

0

<div ng-include="'NewTemplate.html'"></div>

<div ng-hide="'NewTemplate.html'">Thirdtemplate.html</div>

answered Jan 20 '15 at 06:16

Naresh Kumar

276
2
10

2

Hi @Naresh, thanks for your answer, but could you please add a few words of explanation? A code-only answer isn't always self explanatory :) – Lea Cohen Jan 20 '15 at 06:48
In Thirdtemplate.html page include a new html(NewTemplate.html) using ng-include directive based on conditions you can hide the view of previous html i.e in templateUrl (Thirdtemplate.html) – Naresh Kumar Jan 20 '15 at 07:28
@Nersh - great, almost there ;) Just edit your answer to add to it what you wrote in the comment! – Lea Cohen Jan 20 '15 at 11:40

How to change only one ui-view out of many. Without changing state

2 Answers2