how to reload child state in angular js

Question

<li ui-sref=".overview" 
    ui-sref-active="currentState"
    ui-sref-opts="{reload:true}">Flavors</li>

Config:

 .state('azure.overview', {
    url:'/azureOverview', 
    templateUrl  :'partials/azure/azureOverview.html', 
    controller : 'azureOverviewCtrl' 
  })        
controller $scope.init() { }

I have used this snippet but my parent state also reloading but i want only child state to reload

.state('azure.overview', { url:'/azureOverview', templateUrl :'partials/azure/azureOverview.html', controller : 'azureOverviewCtrl' }) controller $scope.init() { get the data from server } — Lakshmi, Apr 15 '15 at 12:07

score 2 · Answer 1 · answered Jan 06 '16 at 19:13

@Lakshmi You may have your answer here:

As of 0.2.14 you also have an option to just reload the current state and not it's parent.

So $state.go(people.search, {}, {reload: true}); would reload the people state as well as all its childs.

While $state.go(people.search, {}, {reload: "people.search"}); would not reload the people state but would reload people.search and its childs.

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

There is a working plunker

Previously, for this question: in ui-router, how to re-resolve only the most local state?, I created this plunker

which shows, that we can use params : {} to define state parameter which is not in the url.. but could be used as "change trigger", forcing just a child state to reload.

Here we can see these states:

  .state('azure', {
      url: "/azure",
      templateUrl: 'tpl.azure.html',
      controller: 'azureOverviewCtrl',
  })
  .state('azure.overview', {
      url: "/overview",
      params: { updater : 1, },
      templateUrl: 'tpl.overview.html',
      controller: 'OverCtrl',
  })

Now, we can create this reload link, which simply sends incremented updater number:

<li ui-sref-active="blue">
  <a ui-sref="azure.overview({updater: ($stateParams.updater + 1) })" 
  >Flavors <b>reloading</b></a></li>

And with this incrementation, we can be sure, that reload link - will reload this child state

Check it here

edited May 23 '17 at 12:22

Community

1
1

answered Apr 15 '15 at 11:42

Radim Köhler

122,561
47
239
335

it is reloading but ui-sref-active is not working i have edited in plunker also but it is not working can you give sol for this Thanks in advance – Lakshmi Apr 15 '15 at 12:09
@ Radim sure but i need sol plz – Lakshmi Apr 15 '15 at 12:13
I udpated the answer, and created a plunker for you, with your stuff – Radim Köhler Apr 15 '15 at 12:24
plunker url please I have seen above plunker but that is not updated – Lakshmi Apr 15 '15 at 12:29
i got ur plunker but the blue is not added when click on Flavors reloading – Lakshmi Apr 15 '15 at 12:38
If we want to have in this constellation working also the ui-sref-active, we can do it like this plunker shows http://plnkr.co/edit/DTHu8eE4dtwXbvl4Ahs8?p=preview. Hope it helps, Enjoy mighty UI-Router – Radim Köhler Apr 15 '15 at 12:50
yeahhhhhhhhhhh its working fine but may i know why you have used two times same code i mean
Flavors reloading

Lakshmi

Apr 15 '15 at 13:00

Yes you may now it ;) The trick is - UI-Router needs direcitve **ui-sref** to be able to use *ui-sref-active*. The ui-sref, must be targeting the state - which is current. That means, that with one of these... we say to UI-Router ... we are really on current state. So - this is good for ui-sref-active. The second - which has different udpater value (different then current stat has) - is in fact there for us ... to really do redirect. So - both are needed, each for different purpose... taht's the angular world of directives ;) hope it helps. Good luck – Radim Köhler Apr 15 '15 at 13:03

oh got it , really really i am very thankful for your efforts... :) ;) – Lakshmi Apr 15 '15 at 13:08

Well, if that helped, it would be nice if your accept this answer as helpful, maybe even upvote it ;) because that's how it is working here.. – Radim Köhler Apr 15 '15 at 13:10

score 0 · Answer 3 · edited May 23 '17 at 11:44

0

The native, built-in functionality of ui-router is:

when navigating among children, form one child state to another child, parent is NEVER reloaded

unless we will explicitly change that built in behaviour, e.g. via decorator as you did and force the reload with passing these options:

  { reload: true}

You can also find similar type of solution in this post AngularJS UI Router $state reload child state only

edited May 23 '17 at 11:44

Community

1
1

answered Apr 15 '15 at 11:51

Reena

1,109
8
16

correct but i want reload same state how can I do that ? – Lakshmi Apr 15 '15 at 12:22
reload using this snippet i handled the reload fun. but ui-sref-active is not working] – Lakshmi Apr 15 '15 at 12:33
add this to style : ui-sref-active="currentState" .currentState{ background: blue; } – Reena Apr 15 '15 at 12:42
i did same @Reena but its not working ui-sref-active="currentState" .currentState { font-weight: bold; } – Lakshmi Apr 15 '15 at 12:44
@Lakshmi I think it might be because not in tag. As I have seen many examples with this is working like http://plnkr.co/edit/KWxf2G9yGnOt05UbHFp9?p=preview – Reena Apr 15 '15 at 13:04

how to reload child state in angular js

3 Answers3