Angular UI Router not executing controller code when change state

Question

I'm developing an Ionic app, using a side menu. But the change of states is not working as I want it to.

This is my parent-child relationship defined in my $stateProvider in the app.js file:

  .config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })
      .state('app.home', {
        url: "/home",
        views: {
          'menuContent':{
            templateUrl: "templates/home.html",
            controller: 'AppCtrl'
          }
        }
      })
      .state('app.map', {
          url: "/map",
          views: {
              'menuContent':{
                  templateUrl: "templates/map.html",
                  controller: 'MapCtrl'
              }
          }
      });
      $urlRouterProvider.otherwise('/app/home');
});

These are the steps to follow:

When I click in the area element defined in the home.html template:

       <area id="ImgMap" shape="poly" coords="456,326,521,69,274,10,259,91,290,216,388,326"
           ng-click="loadMap(0)" ui-sref="app.mapa" ui-sref-opts="{ reload: true }" title="Map" alt="Map"/>
       //I've also tried with href='#/app/map'

the app goes to the app.map state, loads the map.html template and executes correctly the MapCtrl controller code.

Then, if I go back to the home.html page through the side menu (code as follow):

 <ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
  <ion-side-menu side="left" >
    <ion-content class="mymenu">
      <div id="menu-list">
        <ion-list class="list">
          <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/home">
            <i class="icon ion-home"></i><span>Home</span>
          </ion-item>
        </ion-list>
      </div>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

And I click again in the area element defined in the home.html page, just like the first. Only this time it navigates correctly to the map page, but the controller MapCtrl doesn't execute its code, so I can't reload the map info if needed.

So, in resume. From my home state I go to the map state, and everything executes correctly. But if I go back to the home state and repeat the process, the controller of the map state doesn't execute its code this time.

What am I doing wrong?

I've tried different solutions, trying to use template option instead of templateUrl, force the change and reload of state with $state.go(), etc... but none of them seems to work as I expect!

Sunil Lama · Accepted Answer · 2016-06-22 05:20:39Z

1

The problem that you are facing is obvious. That occurs because your controller is loaded only once in Single Page Application. However, in ionic there is a quick fix. You can keep the codes that you want to run in each call of your controller inside the ionicViewBeforeEnter.

app.module('YourAppName').controller('MapCtrl ',function(){
    $scope.$on('$ionicView.beforeEnter', function(){ 
      //all your code you want to reinitialize goes here.
    });
});

answered Jun 22, 2016 at 5:20

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Muli Yulzary Over a year ago

Alternatively you can disable cache in state definition

Sunil Lama Over a year ago

@MuliYulzary apparantly that doesn't reload the controller :/

daniegarcia254 Over a year ago

@AlexRumbaNicked thank you so much! Your solution covered my needs perfectly!

Collectives™ on Stack Overflow

Angular UI Router not executing controller code when change state

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related