add controller to a template menu in ionic1

Question

I have an application made in ionic1 and my application contains a template called menu.html and it contains a<ion-side-menus>which is loaded with my other templates and views. the issue is that I want my variables in the $scope can be seen directly in my template menu.html depending on the driver that is currently loaded.

for example in my controller actual I have:

$scope.title="hello";

in menu.html:

{{title}} (should be display "hello")

but my $scope variables are not shown in menu.html if I add ng-controller = "myControllerController" it works, but I want to avoid this solution, since the contents of my controller will be loaded twice. and I've done the test putting a console.log ("it loads") and this message appears two times. I need that the $scope of menu to be according to the current controller.

this is my code:

menu.html:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon"  menu-toggle="left" >
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu id="sidemenu"  side="left"  >
    <ion-header-bar class="bar-stable">
      <h1 class="title">{{title}}</h1>  <!-- title -->
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/productos">
          Registro
        </ion-item>
        <ion-item menu-close href="#/app/buscar">
          Buscar
        </ion-item>
        <ion-item menu-close href="#/app/ubicaciones">
          Ubicación
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

controller actual: myControllerController.js

tinApp.controller('myControllerController', function($scope) {
 $scope.title="hello";
});

App.js:

.state('app', {
 url: '/app',
 abstract: true,
 templateUrl: 'templates/menu.html'
})

.state('app.view1', {
url: '/view1',
views: {
  'menuContent': {
    templateUrl: 'templates/view1.html',
    controller: 'myControllerController'
  }
}
})

have you tried with a controller alias with `controllerAs` for these controllers, and using the alias in the template view? (just an idea, never tested this) — Kaddath, May 17 '18 at 14:35
@Kaddath I have never tried it, in fact I had never heard it. — yavg, May 17 '18 at 14:36
the concept is fairly simple, you add the alias in your states, for example `controllerAs: 'myCtrl'` and use it to access variables in your view like this: `{{myCtrl.title}}` — Kaddath, May 17 '18 at 14:40
@Kaddath It is not very clear to me. but {{title}} is updated in each controller. — yavg, May 17 '18 at 14:42

score 1 · Accepted Answer · answered May 17 '18 at 14:44

Why not add an event listener to your menu controller that will fire every time a page changes. You can then get the page name every time and use that to set the title. And if its a custom name just add it as one of the pages custom parameters in the route.

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
        ...
    });

add controller to a template menu in ionic1

1 Answers1