listener for ons-sliding-menu "preopen" event

Question

I am trying to define event listener for ons-sliding-menu "preopen" event. I want setTitle() function of UICtrl controller to be invoked on preopen. Here's my code

app.js

app.controller('UICtrl', function($scope, UIService){  

  $scope.setMainTitle = function(title) {
    UIService.setTitle(title);
  }  
 }

I have tried the following HTML. But the event is not even fired ( i tried to write to console, it is not fired at all)

index.html

<div ng-controller="UICtrl" >
    <ons-sliding-menu  var="app.slidingMenu"  ng-preopen="setMainTitle('test')"
   menu-page="menu.html" main-page="main.html"  swipable 
    side="left" type="reveal" max-slide-distance="250px">
</ons-sliding-menu>    
 </div>

another thing I tried was: index.html

 ons.ready(function() {
    app.slidingMenu.on('preopen', function() {
        console.log('preopen');
        setMainTitle('Test');
    } )
 });

in this case the event is fired but setMainTitle function is naturally undefined in this scope.

Could someone have a suggestion how to achieve this?

Answer 1

I'm guessing the title is on your main.html??

I tried the same thing but without using angularJS

Look at this sample: codepen example

JS:

ons.bootstrap();

ons.ready(function() {
  menu.on("preopen", function() {
    document.getElementById("title").innerHTML = "my title";
  });
});

HTML:

<ons-sliding-menu
                  above-page="page1.html"
                  behind-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center" id="title">Page 1</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setAbovePage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setAbovePage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>