CODEWITHSUNDEEP
javascriptangularjscontrollersangular-ui-routerstates
John Abraham
John Abraham

Reputation: 18781

Controller wont refresh when ui-sref state change

Preface

Clicking a ui-sref links wont refresh named views' controller.

Question

How can I refresh the WeeklyCtrl When clicking on a ui-sref="root.store.page.ad({ adSlug: promo.code })" from SidePanelCtrl

note there is a reload on the page. I see the favicon blink but no re-init of any controllers routes.js

$stateProvider
  .state('root', {
    url: '/',
    abstract: true,
    views: {
      '': {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      }
    }
  })
  .state('root.store', {
    url: ':storeSlug',
    views: {          
      'sidepanel': {
        templateUrl: 'views/partials/side-panel.html',
        controller: 'SidePanelCtrl'
      },
      'weekly': {
        templateUrl: 'views/partials/weekly.html',
        controller: 'WeeklyCtrl'
      },
    }
  })
  .state('root.store.page', {

    url: '/page',

  })
  .state('root.store.page.ad', {
    url: '/:adSlug',


  })

index.html

<div ui-view=""></div>

main.html

  <div ui-view="weekly"></div>
  <div ui-view="sidepanel"></div>

side-panel.html

<a ng-repeat="promo in promos" ui-sref="root.store.page.ad({ adSlug: promo.code })"  >
    <h3>...</h3>
</a>

When WeeklyCtrl init it triggers an api call to will trigger.

Pages.details.getPages($scope).success(function(data){
    console.log(data);
});

In the end I want this to trigger again when I switch between promos

UPDATE:

On click of a link: API responds 3 times. controller reinits multiple times 3 times

Upvotes: 0

Views: 3539

Answers (1)

Erti-Chris Eelmaa
Erti-Chris Eelmaa

Reputation: 26268

I guess it's default behaviour. If you want to actually refresh the controller too, add this function to your controller:

$scope.boom = function(promoCode){
      $state.transitionTo("root.store.page.ad", 
          { adSlug: promoCode }, { notify: true }); 
};

and in your view:

<a ng-repeat="promo in promos" 
    ng-click="boom(promo.code);$event.preventDefault();"  >
    <h3>...</h3>
</a>

If you don't like this, feel free to download the source code of ui-sref and create new directive based on that, called ui-sref-ctrl

That's how ui-router is designed.

The controller is only loaded when it isn't in the same state. ui-router will not rerun a controller, and not reevaluate a view template. Even when you use the same controller on multiple states and switch between those, the controller will not rerun.

"ui-sref" does not refresh the "ui-view"(its controller does not rerun) when a link is clicked twice

Upvotes: 4

Related Questions